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.31k stars 914 forks source link

Customize the rotation icon and the position of the rotation axis. #1788

Open cheerylong opened 1 month ago

cheerylong commented 1 month ago

Hello, I would like to implement this feature in the diagram using Konva. I have been searching for a long time but have not found a suitable solution. Is it possible to achieve this style in Konva? If there is a method, please provide me with some guidance. Thank you.

image
lavrton commented 1 month ago

I think the best way is to make your own implementations of such buttons. The UI is just far from Konva.Transformer behaviour.

Just create a rectangle on top of the image, and put circles + icons for anchors. Then implement the logic of every anchor click/drag.

cheerylong commented 1 month ago

I think the best way is to make your own implementations of such buttons. The UI is just far from Konva.Transformer behaviour.

Just create a rectangle on top of the image, and put circles + icons for anchors. Then implement the logic of every anchor click/drag.

Thank you for your reply. Are you saying that all the functions of rotation, scaling, and moving need to be manually implemented, and does Konva provide any auxiliary methods for this? Thank you.

lavrton commented 1 month ago

does Konva provide any auxiliary methods for this?

What methods you want? Just a regular node.x(val), node.width(val), node.rotation(val) to control attributes. Do that on drag of the anchor, calculated needed values.