Konvajs 在移动绘图线时绘制第一个点
Konvajs drawing first point when move drawing line around
我有以下问题:我正在使用 konvajs 构建一个 canvas ,您可以在其中绘制示例线。另外,您应该能够移动这些线。直到这里没有问题,为线条提供可拖动属性一切正常。但是当我移动线条时,我仍然会在开始时画一个点。当我移动线时如何防止这个第一个点绘制?
我一开始使用了简单的绘图演示,所以我有一个用于绘图功能的 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);
});
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);
});
我有以下问题:我正在使用 konvajs 构建一个 canvas ,您可以在其中绘制示例线。另外,您应该能够移动这些线。直到这里没有问题,为线条提供可拖动属性一切正常。但是当我移动线条时,我仍然会在开始时画一个点。当我移动线时如何防止这个第一个点绘制?
我一开始使用了简单的绘图演示,所以我有一个用于绘图功能的 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);
});
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);
});