0

I am trying to figure out a way to detach the Konva.js transformer from my image.

I have successfully created and attached the transformer to the images using a "mouseover" event, but I can't figure out how to detach the transformer with my "mouseout" event once transformation is done. Most documentation and examples that I am finding suggest using the tr.detach() method, which I have tried with no success.

Can anyone suggest an alternate method or take a look at my code and let me know what I am missing?

Here is a link to a demo so that you can take a look at the code and see the issue that I am having: https://codesandbox.io/s/intelligent-cohen-2f38i?file=/index.html

dcurtains
  • 3
  • 1

1 Answers1

1

Note: You might want to reconsider the use of attachTo() command. The Konva docs at konvajs.org/api/Konva.Transformer.html say about attachTo() that 'This method is deprecated and will be removed soon'.

Transformer has the nodes[] array into which you push the shapes that you want to have the transformer attached to. In your case it sounds like you are showing the transformer on one node at a time - the array allows you to add multiple shapes which you will find useful another time. For example...

// get
const nodes = transformer.nodes();

// set
transformer.nodes([rect, circle]);

To 'remove' a node from the transformer, you need to remove it from the transformer.nodes list. If you want to clear the transformer and you only had one shape then give it an empty array.

transformer.nodes([]);

will do that for you.

Vanquished Wombat
  • 9,075
  • 5
  • 28
  • 67
  • Hey thanks for this solution! I actually ended up just creating the transformer outside of my event and then used the event listeners to attach and detach the nodes, which looks similar to what you are doing but using the attachTo and detach methods. – dcurtains Jun 21 '21 at 23:31
  • You might want to reconsider, The Konva docs at https://konvajs.org/api/Konva.Transformer.html say about attachTo() that 'This method is deprecated and will be removed soon.' – Vanquished Wombat Jun 22 '21 at 06:57
  • Very good point that I didn't consider. I have edited my code to reflect your suggestions and it works like a charm! – dcurtains Jun 22 '21 at 20:31
  • If my answer was correct please mark it as good by clicking the tick. I edited it to include a note about the deprecation. – Vanquished Wombat Jun 23 '21 at 05:35