Konvajs 在移动绘图线时绘制第一个点
Posted
技术标签:
【中文标题】Konvajs 在移动绘图线时绘制第一个点【英文标题】:Konvajs drawing first point when move drawing line around 【发布时间】:2020-10-08 09:02:55 【问题描述】:我有以下问题:我正在使用 konvajs 构建一个画布,您可以在其中绘制例如线条。另外,您应该能够移动这些线。直到这里没有问题,为线条赋予可拖动属性一切正常。但是当我移动线条时,我仍然会在开始时画一个点。移动线时如何防止第一个点绘制? 一开始我使用了简单的绘图演示,所以我有一个绘图功能的 mousedown 事件
stage.on('mousedown touchstart', function (e)
isPaint = true;
var pos = stage.getPointerPosition();
lastLine = new Konva.Line(
stroke: strokeColor,
strokeWidth: 5,
draggable: true,
lineCap: 'round',
globalCompositeOperation:
mode === 'brush' ? 'source-over' : 'destination-out',
points: [pos.x, pos.y],
);
layer.add(lastLine);
);
【问题讨论】:
【参考方案1】:stage.on('mousedown touchstart', function (e)
// start drawing only when we are on empty area
const onEmptySpace = e.target.getLayer() === backgroundLayer;
if (!onEmptySpace)
return;
isPaint = true;
var pos = stage.getPointerPosition();
lastLine = new Konva.Line(
stroke: strokeColor,
strokeWidth: 5,
draggable: true,
lineCap: 'round',
globalCompositeOperation:
mode === 'brush' ? 'source-over' : 'destination-out',
points: [pos.x, pos.y],
);
layer.add(lastLine);
);
【讨论】:
谢谢你,有点帮助。我的错是我没有说我的绘图层下有一个背景层。这样舞台就永远不会空了。我可以将其限制在一层吗? @Sega 我稍微更新了答案。您只需要检测mousedown
的开始位置。
非常感谢!你在那里帮了我很多。可能会尝试更复杂的解决方案。以上是关于Konvajs 在移动绘图线时绘制第一个点的主要内容,如果未能解决你的问题,请参考以下文章