社区。我需要使用 KonvaJS 用鼠标绘制箭头。我不使用 react 。这是我第一次使用 KonvaJS。我搜索过解决这个问题的信息,但一无所获。我还阅读了这个库的文档,但我只找到了如何绘制基本箭头。我会感谢你的帮助。非常感谢!
最佳答案
绘制箭头的方法有很多种。您可以关注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;
});
关于javascript - 如何使用 KonvaJS 用鼠标绘制箭头?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64546883/