I am working on a SVG application 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 an SVG object, 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
+1
A:
You could take a look at some existing open source implementations. svg-edit is one which you already mentioned.
To showcase a tool that I developed, I wrote a demo which implements this functionality. This which may serve as a simpler and more restrictive example than svg-edit, as it doesn't do too much other than allow you to draw rects and circles, and rotate/translate/scale them.
echo-flow
2010-10-22 10:18:18
THanx,good example, But i do not want to use jquery.i m currently using SVG is there an other way to implement these functionalty i have not sense how to fix one cornor of SVG rect and other corner of rect is stretchable as i said before like SVG-edit,when the canvas of SVG is Draggable,i have no idea about Jquery syntax. i want to implement a function that implement that functionalty
Abdul Rauf
2010-10-25 10:33:37
The jquery-svg library is only used in this example for SVG element creation, as a convenient alternative to the verbose DOM syntax: http://keith-wood.name/svg.html It shouldn't be too difficult to understand. The main logic is implemented using SCXML, and the scxml-js library which compiles it to JavaScript in the browser: http://www.w3.org/TR/scxml/ If you understand the behaviour defined by the state machine used in this demo, it shouldn't be too difficult to roll your own example.
echo-flow
2010-10-25 12:01:45
thanxs Echo. Just had a quick look at the W3 documentation and it seems quite daunting for someone totally ignorant to XML. It primarily seems to be focused towards speech recognition, is there any particular section I should focus and expect that to resolve my issue mentioned above? I'd rather not spend days on this if I donot have to...
Abdul Rauf
2010-10-27 11:53:15
A:
Echo-flow, thank you so much, thats EXACTLY what I am looking for as well. Three cheers.
Will study your code :)
Kayote
2010-10-25 08:30:53