Loading ...
Sorry, an error occurred while loading the content.

Re: [svg-developers] Re: resize and draggable the group of the SVG element.....

Expand Messages
  • Peter Thompson
    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
    Message 1 of 6 , Nov 10, 2010
    • 0 Attachment
      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_schiller@...> wrote:

      From: jeff_schiller <jeff_schiller@...>
      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_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

      > 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]
    Your message has been successfully submitted and would be delivered to recipients shortly.