0
297
ViewsKonva.js. Resize rect by bounds in Transform.js
By default konva-transformer use little rectangles in the middle of the border (middle-left, middle-right, top-center, bottom-center) . But i want to change resize by borders, like that
Is there any library that solves my problem or an easy way to implement it?
2 answers
Answer question0
Look at the example, you just need to update the logic in the Transformer class
0
First off, have you considered how this will work for users that are using a touch-based interface, where there is no realistic potential for a mouseover event?
As an alternative, you could switch off the corner handles (as shown in your image) and switch on only the edge handles. There is a demo here that shows all the config options for the transformer which may be of assistance, more explanation here.
// set handlers on edges only.
transformer.enabledAnchors(['top-center', 'middle-right', 'middle-left', 'bottom-center',]);
To answer your question specifically, there is nothing in Konva.js to do this for you. You would have to develop it for yourself unless someone else can provide sample code.
The way to approach it would be to draw four lines (not a rect, four individual line shapes) around the selected shapes and use the mouseover & mouseout events to give you the necessary info to show / hide the cursor, etc.