konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.43k stars 918 forks source link

Strange behavior when fillingPatternImage and clone update #1760

Open webmaxpro opened 4 months ago

webmaxpro commented 4 months ago

Good day. I have created an example for you here: https://jsbin.com/dobives/edit?js,output

I need to place an icon in the rotation anchor. And I have implemented it successfully. I also need to make the object copyable. And now on the copied object the rotation icon behaves strangely.

How to test:

  1. Click on the green circle - it becomes active.
  2. Click on the copy button - the red copied item appears
  3. Click on the green (original) - it becomes active. You can move it, rotate it, resize it all right.
  4. Click red (copy) - it becomes active. If you rotate it or resize it, everything is fine. But as soon as you move the red one, the rotation icon above the green one becomes active. That's the problem. I can't understand why it becomes active and how to fix it. Why does moving the copy affect the original? It feels like there is some kind of bug....

er1 er2

lavrton commented 4 months ago

Looke like this issue my be here:

var cloneTrans = trans.clone({
    id: 'trans' + id,
});

It may be better to create a new transformer to not mess things.

webmaxpro commented 4 months ago

A new transformer can certainly help. The problem is that in the original code I have a lot of eventListenetrs and other functions on the transformer. And all this will have to be repeated for the new transformer. In the clone they were all copied.

And there is obviously some bug, because resizing or rotating does not produce an error, but moving does.....