Konvajs 在移动绘图线时绘制第一个点

Posted 2023-03-25

【中文标题】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 的开始位置。

非常感谢！你在那里帮了我很多。可能会尝试更复杂的解决方案。