search

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.56k stars 926 forks source link

Transformer handles location discrepancy when resizing on scaled stage #841

Closed friksa closed 4 years ago

friksa commented 4 years ago

Using the transformer to edit text based on this example: https://konvajs.org/docs/sandbox/Editable_Text.html

When the stage is scaled down with a CSS transform and you resize the text, everything visually looks great, except the handles do not follow the actual mouse location.

Please see this video showing the issue: https://www.screencast.com/t/sLaR6NqIMtA

lavrton commented 4 years ago

I think it is fixed now. I will publish the release later.

But in general, I don't recommend to scale stage with CSS. Usually, it is better to use stage.scale()

friksa commented 4 years ago

Awesome! Thanks so much. Will test it as soon as it is available.

We are scaling multiple items at the same time with CSS as the whiteboard is used to annotate on top of other components such as videos, images, and other custom widgets. Not all of these custom components can be be added to the stage.

friksa commented 4 years ago

Confirmed that it is fixed in 4.1.4. Thanks again for a great project!

lavrton commented 4 years ago

Thanks for checking!