February 10th, 2009
Here is how my “Shapes and Strokes“ creation looks like in Flex SVG Explorer (second sample in the Load SVG File dropdown):
Obviously some strokes got lost in translation there, but I am still very happy with the outcome considering my initial goals for the two prototypes.
What does it all mean?
Basically, it means that by using two different Flex SVG libraries (SVG Viewer API and Degrafa) I’ve closed the full cycle SVG manipulation loop in Flex:
1) Create new SVG-based graphic with Degrafa SVG Painter and export it to SVG markup;
2) Load the created SVG document in Flex SVG Explorer using SVG Viewer API for further inspection and manipulation.
Now I can take a little breather, wait for the two libraries to improve, and slowly work on adding shape templates, object handles and other tools for creating and editing of SVG graphics in Flex.
Perhaps I should combine the two tools into one, or just wait till SVG to Degrafa converter and API comes out. Then I could just stick with Degrafa for loading and manipulating SVG. Some utility classes or toString methods to get SVG element markup of Degrafa objects would be nice too . Maybe I’ve missed it in the current codebase.
February 8th, 2009
I’ve encountered a temporary roadblock in wiring up Object Handles with SVG Viewer API in Flex SVG Explorer to enable shape selections. Will work on it next week.
Degrafa SVG Painter (v. 0.1)
Here is another Flex SVG application I started this week: Degrafa SVG Painter.
It’s very basic and a little slow for creating sophisticated drawings, but I was able to create the painting above.
I call this one “Shapes and Strokes” :)
SVG Code View
Besides the main Paint Canvas, there is also an SVG code view in Degrafa Painter that displays the resulting SVG drawing code you can save for later use in other SVG tools:
Click on the screenshots above to see the first rev. of Degrafa SVG Painter.
Source Code Details
This one is obviously done with Degrafa, demoing its dynamic drawing features.
The main Canvas uses the Surface UI component, but the Stroke Preview, Line Cap and Line Join buttons in the stroke control bar are done with the lightweight GeometryComposition object.
That gorgeous Photoshop Express-like UI theme is called Kingnare, created by Jin Xin.