Re: [svg-developers] Re: resize and draggable the group of the SVG element.....
- Here is a simple example that shows the drag/drop and resize of a rectangle: http://fastsvg.com/notes/drag1.svg
It doesn't show a selector box or put drag handles on the rectangle when it is selected. You resize the rectangles by grabbing'near' the edges.
--- On Thu, 11/4/10, jeff_schiller <jeff_schiller@...> wrote:
From: jeff_schiller <jeff_schiller@...>
Subject: [svg-developers] Re: resize and draggable the group of the SVG element.....
Date: Thursday, November 4, 2010, 3:34 PM
--- In firstname.lastname@example.org, "Mr Rauf" <cute_rauf_696@...> wrote:
> I am working on a SVG and now want to let a user resize an object
> using draggable corners, very much like in SVG-edit (http://svg-
> edit.googlecode.com/svn/trunk/editor/svg-editor.html). The
> functionality should work as follows: The user selects the SVG objects,
> drags it to the main `canvas' and once on the `canvas', four corners
> on the outside of the object appear, the user can drag on each of the
> corner points & drag to enlarge the object. The objects will be
> rectangular in shape and created using paths, not using the SVG `rect'
> function. Would anyone have any suggestions as to how this should be
> Thanks in Advance..
Here's how SVG-edit did it:
- have listeners for mousedown, mouseup, mousemove
- if an element is clicked on (in mouseup), then that is your currently selected element
- put a 'selector box' element on top of the selected element (that has the visible handles you can drag)
- in your mousemove, detect if a handle is being dragged, while it's being dragged, determine what the element's new size should be and either: a) recompute the element's geometry to fit into that box or b) put a transform on that element
See SVG-edit's code involving Selector, SelectorManager and recalculateDimensions() and the mouse event handler functions.
Note that these are not trivial pieces of code and they took awhile to get into a working state.
Best of luck,
[Non-text portions of this message have been removed]