【问题标题】:Konvajs drawing first point when move drawing line aroundKonvajs 在移动绘图线时绘制第一个点
【发布时间】: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);
});

【问题讨论】:

    标签: javascript canvas html5-canvas konvajs konva


    【解决方案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 的开始位置。
    • 非常感谢!你在那里帮了我很多。可能会尝试更复杂的解决方案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-06
    • 1970-01-01
    • 2011-04-27
    • 1970-01-01
    • 2018-12-19
    • 1970-01-01
    相关资源
    最近更新 更多