javascript - 如何使用 KonvaJS 用鼠标绘制箭头?
问题描述
社区。我需要使用 KonvaJS 用鼠标绘制箭头。我不使用反应。这是我第一次使用 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;
});
推荐阅读
- python - 如何在标签中显示图片和文本(PyQt)
- java - Use JSON with JAVA NIO
- protractor - How to send ENTER key stroke using protractor
- python - 将表情符号的Unicode字符串表示形式转换为python中的Unicode表情符号
- gradle - Build Ada with Gradle
- r - plot the tails of distributions
- php - 如何检查用户是否已连接并获取他的会话 ID(由 PHP 启动的会话)
- json - 验证嵌套 JSON 对象
- c++ - 带有多个参数的 Map.emplace C++ 17
- javascript - Kendo UI Scheduler 禁用删除确认或更改其内容