When loop completes using freehand drawing using konvajs event?

Question

I have made canvas on car image and implemented free hand drawing using KonvaJs .

what I want is -:

when free hand completes a closed loop (any shape) fill color within closed shape.

can anyone tell me is there any event when closed loop is made?

Any help will be appreciated

Thanks in advance

score 1 · Answer 1 · answered Nov 25 '20 at 13:33

There is no "event" for closed drawing. If you want to detect if a line is closed when the drawing is finished, you can just check the positions of the first and the last points on the line. If they are too close - then you can make a closed shape.

Following Free drawing demo:

stage.on('mouseup touchend', function () {
  isPaint = false;
  const points = lastLine.points();
  const p1 = {x: points[0], y: points[1]};
  const p2 = {x: points[points.length - 2], y: points[points.length - 1]};
  
  const dist = Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
  if (dist < 10) {
    lastLine.closed(true);
  }
  layer.draw();
});

Non react demo: https://jsbin.com/cijobitaza/edit?html,js,output But you can do something very similar with react.

Thank you for attention !! But I am using Konva.Image for free hand drawing — shubham soni, Nov 26 '20 at 08:26
Then you can do almost the same. Check the first point and the last one. — lavrton, Nov 26 '20 at 12:59

When loop completes using freehand drawing using konvajs event?

1 Answers1