javascriptreactjskonvajskonvakonvajs-reactjs

how to get konva transformer anchor positions for any shape


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).


Solution

  • 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}