How to create resizable panel for element resizing using Javascript?

I want to create something like this:

Please do note that, I want to create points which are outside the shape circle. When dragged the element should resize.

And also the elements will be added dynamically in canvas. So how I can do this using Javascript/JQuery?

It looks like you are looking for some kind of SVG editor.

There are several of those that people have been working on in JavaScript, with http://svgjs.com/
and https://github.com/johan/svg-edit being just a few of them.

Thank you. But I just want to know how to create the selection lines using Javascript/JQuery. The one which are shown in the image above.

I can’t test it now (I’m using iOS Safari which doesn’t support it), but I think you may be able to do a lot with the CSS resize property

https://caniuse.com/css-resize/embed/

Thanks, but I’m afraid you are not getting what I’m trying to ask. Let me try to simplify it more. I’m basically trying to create transform tool like one in Adobe Photoshop, in the same way I’m trying to re-create in Web.

When the element (circle) is clicked ==> The transform lines should show up ==> and when transform lines are dragged the element (circle) should resize.

I hope I’m able to help you understand my query.

Thank you.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.