如何用KonvaJS用鼠标画箭头？

Question

社区。我需要使用KonvaJS用鼠标绘制一个箭头。我不使用React。这是我第一次使用KonvaJS。我已经搜索了解决这个问题的信息，但我什么也没找到。我也阅读了这个库的文档，但我只发现如何绘制一个基本的箭头。我将感谢你的帮助。非常感谢!

Answer 1

有很多种方法可以画箭头。您可以跟随Free drawing Konva Demo，但使用箭头而不是直线。

最简单的解决方案是使用mousedown -创建一条线，使用mousemove更新线位置，使用mouseup -完成线。

let arrow;
stage.on('mousedown', () => {
   const pos = stage.getPointerPosition();
    arrow = new Konva.Arrow({
      points: [pos.x, pos.y],
      stroke: 'black',
      fill: 'black'
    });
    layer.add(arrow);
    layer.batchDraw();
});

stage.on('mousemove', () => {
  if (arrow) {
      const pos = stage.getPointerPosition();
      const points = [arrow.points()[0], arrow.points()[1], pos.x, pos.y];
      arrow.points(points);
      layer.batchDraw();
  }
});

stage.on('mouseup', () => {
  arrow = null;
});

演示：https://jsbin.com/lefivihibu/2/edit?html,js,output