0


I have the following problem: I'm using konvajs to build a canvas where you can draw for example lines in it. Plus you should be able to move these lines around. Untill here no problems, giving the lines the draggable attributes everything works fine. But when I move the lines I still draw a point at the beginning. How can I prevent this first point drawing when I move the line?

I used the simple draw demo for the start, so I have a mousedown event for the drawing function

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);
});
Sega
  • 47
  • 6

1 Answers1

0
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);
});
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • Thank you, that help kinda. My fault was I didnt said that I have a background layer under my drawing layer. So that way the stage is never empty. Can I limit it just on the one layer? – Sega Jun 19 '20 at 15:04
  • @Sega I slightly update the answer. You just need to detect where `mousedown` started. – lavrton Jun 19 '20 at 15:38
  • Thank you very much! You helped me a lot there. Would have tried a more complicated solution propbably. – Sega Jun 19 '20 at 17:18