如何使用 KonvaJS 用鼠标绘制箭头？

【问题标题】：How to draw an arrow with the mouse using KonvaJS?如何使用 KonvaJS 用鼠标绘制箭头？
【发布时间】：2020-10-27 00:46:34
【问题描述】：

社区。我需要使用 KonvaJS 用鼠标绘制箭头。我不使用反应。这是我第一次使用 KonvaJS。我搜索了解决此问题的信息，但一无所获。我还阅读了这个库的文档，但我只找到了如何绘制基本箭头。我会感谢你的帮助。非常感谢！

【问题讨论】：

你能贴一张png图片箭头的样子吗？
@ChrisP 当然。让我告诉你我想要做什么：codesandbox.io/s/w12qznzx5?file=/src/index.js 在这个链接中有一个白板可以让你画箭头。我想画这样的箭头。我的目的是在不使用 React 的情况下设计这样的白板。

标签： javascript konvajs

【解决方案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

【讨论】：