konvajs - 当循环使用 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.