Re: resize and draggable the group of the SVG element.....
- --- In firstname.lastname@example.org, "Mr Rauf" <cute_rauf_696@...> wrote:
>You do realize that Narendra and I are different people, correct? :)
> --- In email@example.com, "jeff_schiller" <jeff_schiller@> wrote:
> > --- In firstname.lastname@example.org, "Mr Rauf" <cute_rauf_696@> wrote:
> Tanks Jeff,Narendra Sisodiya
> but i want more help from you.you are the only man guide me on right path.when you mousedown and selector rectangle is appear,one or more element are selected, the group elements can drag.but the problem is that how to make the rectangle on the mousedown and increase size on mousemove..
> thaks again,
> jeff and Narendra Sisodiya
You can determine as the user moves the mouse, how much they've moved (delta x and y), then apply those changes to the element selected.
- 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 email@example.com, "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]