inputdraw, one online Flash Draw Widget, outputs SVG

Maybe you have used some online Draw Widgets, using Jscript, but some of them can not save the image you have drown, some of them can only be used in special web Browser(IE6, IE7, FF?). inputdraw is one easy impelemented online Flash Draw Widget, we are know Flash is crossbrowser, and the most important is it can output the result drawing as SVG image and directly print the SVG file in the Textfield. It uses Ajax as data processing background. Cool. Here is the interface, upper is flash drawing interface, the bottom is text SVG outputing.


inputdraw overview

You can also see the result in SVG viewer.
The implementation is very easy. Only 3 steps:

1- First, include both needed javascript files. SWFObject
is a nice Javascript Flash Player detection and embed script. The other
is just an abstraction to turn everything simple and easy to do:
<script src="swfobject.js" type="text/javascript"></script>
<script src="inputdraw.js" type="text/javascript"></script>

2 - To create an editor, put a <div/> on the place you want the widget with an Id.
Also include an hidden field with any other Id. Finally, run a single
javascript code line to create the widget passing the Ids also:
<div id="place"></div>
<input type="hidden" id="svgdraw" />
<script type="text/javascript">
new InputDraw("inputdraw.free-non-commercial.1.3.swf", "place",
{id:"svgdraw", width:"300", height:"300", animation:60, background_image:"/images/backgrounds/minorca_beach.jpg"});
</script>

3 - finally, to view the SVG (only works for InputDraw's created SVG
for now) you can pass the SVG url, directly put the SVG text in src_svg
option or indicate a field Id in the src_id option.
You can also set the animation passing a numeric value in the animation on the query string, being 0 (zero) not animated:
<div id="viewer"></div>
<script type="text/javascript">
new InputDraw("inputdraw.free-non-commercial.1.3.swf", "viewer",
{src:"/svg/file", width:"300", height:"300", background_image:"/images/backgrounds/minorca_beach.jpg"});
</script>

Getting more detail, please visit inputdraw . Nice work.


Blog

回應

Re: inputdraw, one online Flash Draw Widget, outputs SVG

Cool. Here is the interface, upper is flash drawing interface, the bottom is text SVG outputing.
curt
Nike Air Rally