Resizing and rotating a line with the same anchor in Konva.js and tracking the width, height, and rotation

Question

Resizing and rotating a line with the same anchor in Konva.js -

I am able to get the anchor points for line as per solution provided in below post but how can we track the line height, width and rotation in Konva Js ? Resizing and rotating a line with the same anchor in Konva.js

Answer 1

Konva.Line objects are drawn in a rectangular space. The point data that you provide for the line points is relative to the top-left of this rectangular space. In your use case you are creating a single line segment and you are using custom drawn handles on the end points of the line segment. 'Moving' the points does not change the position of the rectangular space they are drawn in.

The position of the rectangular space and rotation of it are found as follows:

const redLine = new Konva.Line({
    x: 20,
    y: 30,
    points: [5, 70, 140, 23],
    stroke: 'red',
    strokeWidth: 15,
    lineCap: 'round',
    lineJoin: 'round',
  });

console.log('position ', redLine.position()) // logs {x: 20, y: 30}
console.log('rotation', redLine.rotation()) // logs 0

You might have been unaware of the x,y position feature of the rectangular space that the line is drawn in, in which case the position will be (0,0).