Konva - Line Drag

Jaydeep Patel 0
Viewed 21

I have array of draggable lines. When drag is completed I want to have location of each points of the the line updated in array. I was getting some help from https://konvajs.org/docs/react/Transformer.html as these lines will require transformation as well.

However, when I drag a line it displace it self if I update the array that is being used to draw the lines. I am not able to understand why it is doing that and how to solve this.

I have sample Codesandbox here - https://codesandbox.io/s/nice-fog-rrbpj4

react-konva drag konvajs
1 Answers

While you drag, x and y properties of Konva.Line are changed.

If you apply these moves from x, y properties to points attribute, you need to reset x and y back to original values 0, 0.

const points = shapeProps.points.map((p) => {
  return shapeRef.current.getAbsoluteTransform().point({
    x: p.x,
    y: p.y
  });
});
shapeRef.current.position({ x: 0, y: 0 });
onChange({
 ...shapeProps,
 points
});

https://codesandbox.io/s/inspiring-bash-5whv01

lavrton0
Related