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

Re: resize and draggable the group of the SVG element.....

Expand Messages
  • jeff_schiller
    ... You do realize that Narendra and I are different people, correct? :) You can determine as the user moves the mouse, how much they ve moved (delta x and y),
    Message 1 of 6 , Nov 8, 2010
      --- In svg-developers@yahoogroups.com, "Mr Rauf" <cute_rauf_696@...> wrote:
      >
      >
      >
      > --- In svg-developers@yahoogroups.com, "jeff_schiller" <jeff_schiller@> wrote:
      > >
      > >
      > > --- In svg-developers@yahoogroups.com, "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 do realize that Narendra and I are different people, correct? :)

      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.

      Jeff
    • 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 2 of 6 , Nov 10, 2010
        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.