0

enter image description here

I'm trying to get anchor positions of the transformer bounding box(i.e the 8 points of blue colour rectangle around the polygon shape having 4 circles)

right now only if the shape is Rectangle then the below code will work. because the rect initial point and transformer initial points are same.

e.target.getAbsoluteTransform().point({ x: 0, y: 0 })

but, if the shape is polygon like in above image how to get the anchor co-ordinatees of the transformer i.e(8 white square points of rectangle).

Vikas Acharya
  • 3,550
  • 4
  • 19
  • 52

1 Answers1

2

The Konva.Transformer is a special shape used to provide scale, position and rotation UI. Other Konva shapes have the getClientRect() method to get their enclosing rect, however the Konva.Transformer does not.

Fortunately Konva itself has to know where the Transform rect is located so that it can weave its magic. To that end, there is the Konva.Transformer.__getNodeRect() method.

transformer.on('transform', function(){

  console.log('rect', transformer.__getNodeRect())

})

Logs

rect {x: 295.25263213337223, y: 25.995983209424026, width: 249.99999999999898, height: 131.00000000000108, rotation: 0.8612265220328029}

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
  • even if i console transformer there is no __getNodeRect() anywhere in the object. I just want to know how you just magically found this. I was in a react environment and inside evt.currentTarget i.e transformer object there it's not showing __getNodeRect. Any docs? – Vikas Acharya Mar 29 '23 at 16:03
  • 1
    As you might guess the __ prefix shows that the author intended this not to be on general display. I found it by looking at the source code on github. Went in to https://github.com/konvajs/konva/blob/master/src/shapes/Transformer.ts and searched for 'clientRect'. Eventually found that method. It should be on the transformer prototype. – Vanquished Wombat Mar 30 '23 at 08:46
  • is it safe to use it, In future if he rename that? – Vikas Acharya Mar 30 '23 at 09:03
  • 1
    Its always possible for anything to change if you don't control the source. You should understand that if you intend to rely on third party code. Konva is relatively mature and stable, but still active meaning changes are happening. You could request a formal method name is added, or you could grab the code and make your own function that does the same work. – Vanquished Wombat Mar 30 '23 at 09:20