How to control rotation value of Line Component of Konva?

Question

I want to control rotate of Line Component. But it doesn't work correctly. When I rotate it or after I rotate and then drag it ==> position of it is not correct.

This is my initial points:

const [points, setPoints] = useState([
  [20, 100],
  [100, 100],
  [100, 200],
  [20, 200]
]);

I have a Line component to draw my points:

 <Line
        ref={shapRef}
        points={flatPoints(points)}
        stroke={"#E90000"}
        strokeWidth={1}
        closed
        strokeScaleEnabled={false}
        draggable={true}
        onDragEnd={handleDragEnd}
        rotationDeg={rotateDeg}
        onTransformEnd={handleTransformEnd}
      />

And I want to transform that Line with rotate, scale and drag options. These values after transform will be saved in state. I have some functions to handle these transform:

const handleDragEnd = (e) => {
    // return how many x,y distance that shape move (from:0)
    const deltaX = e.target.x();
    const deltaY = e.target.y();
    const newPoints = [...points].map((item) => {
      return [item[0] + deltaX, item[1] + deltaY];
    });

    onPointsChange(newPoints);

    // reset
    e.target.x(0);
    e.target.y(0);
  };

  const handleTransformEnd = (e) => {
    if (!shapRef.current) return;
    const node = shapRef.current;
    let newRotationDeg = node.rotation();
    let scaleX = node.scaleX();
    let scaleY = node.scaleY();
    const newPoints = [...points].map((item) => {
      return [item[0] * scaleX + node.x(), item[1] * scaleY + node.y()];
    });
    onPointsChange(newPoints);
    onRotateDegChange(newRotationDeg);
    //reset
    node.rotate(0);
    node.scaleX(1);
    node.scaleY(1);
    node.x(0);
    node.y(0);
  };

When I rotate this Line, I want it rotate in center point, but it jumps to another position in Canvas. How to caculate new points with rotation value after transform ? I just need to save new Points and rotation value.

This is my simple demo: https://codesandbox.io/s/simple-konva-jp54q1?file=/src/DrawArea.js. I handle rotate in handleTransformEnd Function. Thank you for helping me

Answer 1

The konva.Transformer rotates rect-based shapes about their center point - not their position. This has the effect of changing the position. In other words it is not simply a rotation but also a move. The math to calculate where the new location of the points in relation to the layer(0,0) is not difficult but we can escape it altogether by borrowing the konva.Transform (note this is different from the Konva.Transform_er)

I solved a similar question related to getting the corner co-ordinates of a rotated rect in this question. The magic is in using

shape.getAbsoluteTransform().point(pt);

I explained the 'how' in detain in this blog post.

In a nutshell, in case the blog link evaporates, we can get the list of individual steps of position, rotation & scaling applied to the shape. We can the drop into this black-box machine any (x,y) point and we will receive the position of that point if the same transformations are applied on it.

This technique works regardless of the position, rotation & scaling applied to the shape, meaning we can have one function to call after a plain drag AND at the the end of a transformer interaction.

// Function to get position of a point with any 
// position / rotation / scaling applied.
// node = the shape we are using to determine the transform of the pt.
// pt = {x,y} of point to rotate, 
// returns {x, y} giving the new point.
function getTransformedPoint(node, pt){
  return node.getAbsoluteTransform().point(pt);
}