什么时候循环完成使用徒手绘制使用konvajs事件？

Question

我在汽车图像上制作了画布，并使用KonvaJs实现了自由手绘。

我想要的是-:

当自由手完成一个闭环(任何形状)填充颜色封闭的形状。

有人能告诉我在闭环时是否有事件？

如有任何帮助，将不胜感激。

提前感谢

Answer 1

闭图没有“事件”。如果要检测绘制完成时是否关闭了一条线，则只需检查直线上第一个和最后一个点的位置即可。如果它们太近，那么你可以做一个封闭的形状。

跟随自由绘图演示

stage.on('mouseup touchend', function () {
  isPaint = false;
  const points = lastLine.points();
  const p1 = {x: points[0], y: points[1]};
  const p2 = {x: points[points.length - 2], y: points[points.length - 1]};
  
  const dist = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
  if (dist < 10) {
    lastLine.closed(true);
  }
  layer.draw();
});

非反应演示：https://jsbin.com/cijobitaza/edit?html,js,output，但是您可以对react做一些非常类似的事情。