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
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
});