Search code examples
javascriptkonvajs

How to get new points of line after transformation in KonvaJS

Let's say I draw a rectangle on Canvas using Konva.Line (I don't want to use Konva.Rect for application specific reasons) by giving it following points array

let points = [300, 100, 500, 100, 500, 200, 300, 200, 300, 100]

Next I do some transformations on it. I scale X by 1.5 and Y by 2.5. I also rotate it by 45 degrees counterclockwise.

Now I want to know the new coordinates of the points using the Konva.Line object. I know it has position(), rotation(), scaleX(), scaleY() and the original points array. But how do I use these to arrive at the final coordinates.

Solution

  • To get absolute position of any point of a line you can use this:

    line.getAbsoluteTransform().point({ x: 300, y: 100})