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.
Peter
--- On Thu, 11/4/10, jeff_schiller <jeff_schil...@hotmail.com> wrote:
From: jeff_schiller <jeff_schil...@hotmail.com>
Subject: [svg-developers] Re: resize and draggable the group of the SVG
element.....
To: svg-developers@yahoogroups.com
Date: Thursday, November 4, 2010, 3:34 PM
--- In svg-developers@yahoogroups.com, "Mr Rauf" <cute_rauf_...@...> 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
> implemented?
> 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,
Jeff
[Non-text portions of this message have been removed]
------------------------------------
-----
To unsubscribe send a message to: svg-developers-unsubscr...@yahoogroups.com
-or-
visit http://groups.yahoo.com/group/svg-developers and click "edit my
membership"
----Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://groups.yahoo.com/group/svg-developers/
<*> Your email settings:
Individual Email | Traditional
<*> To change settings online go to:
http://groups.yahoo.com/group/svg-developers/join
(Yahoo! ID required)
<*> To change settings via email:
svg-developers-dig...@yahoogroups.com
svg-developers-fullfeatu...@yahoogroups.com
<*> To unsubscribe from this group, send an email to:
svg-developers-unsubscr...@yahoogroups.com
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.com/info/terms/
