Use the degrafa framework to dynamically display and operate SVG documents in flexThe degrafa framework is very close to dynamically displaying and operating SVG documents in flex. through some simple conversions, it can basically display and operate SVG images. In this way, a large amount of SVG graphics resources can be directly used in the flex application. The basic idea is as follows: add the degrafa surface object in mxml, read the SVG document, and express the image as a degrafa graphic object, and dynamically add it to the surface. then, you can use the Object ID to operate on these graphic elements. Because SVG documents are in XML format, These graphic elements can be easily read. first, add degrafa surface in mxml as the canvas for displaying the image <degrafa: Surface id = "surface1" x = "0" Y = "0"> </degrafa: surface> then, after loading the SVG image file, traverse its graph object // a recursive function that reaches every element in an XML tree Private Static function searchpath (node: XML ): void {// loop over all of the child elements of the node for each (VAR element: XML in node. elements () {If (element. name (). tostring () ==( Svgnamespace + ": path") {var newpath: svgpath = new svgpath (element, CT); newpath. Show ();}.................. Note that a flex object is created for each SVG object. Its parent class is a graphics class svggraphic, and then a specific subclass such as svgrect and svgpath is derived. Each subclass is responsible for setting and displaying its own properties. For example, svgpath reads the attributes of the corresponding node during creation, including fill, stroke, and other public function svgpath (element: XML, container: surface): void {surface = container; for each (var attr: XML in element. attributes () {// alert. show (ATTR. name (). tostring (); Switch (ATTR. name (). tostring () {Case "ID": Id = ATTR. tostring (); // alert. show (ID); break; Case "D": Data = ATTR. tostring (); break; Case "fill": fillcolor = ATTR. tostring (); break; case" Fill-Opacity ": fillalpha = Number (ATTR. tostring (); break; Case "stroke": strokecolor = ATTR. tostring (); break; Case "stroke-Opacity": strokealpha = Number (ATTR. tostring (); break; Case "stroke-width": strokewidth = Number (ATTR. tostring (); break; Case "transform": transformstr = ATTR. tostring (); break; Case "style": Style = ATTR. tostring (); break; default: break;} If (ID = NULL) id = "path _" + (Math. Random () * 1000000). tostring (); If (style! = NULL) // style on high priority setbystyle ();} then create the corresponding degrafa object during display and apply these attributes to public function show (): void {try {// create new group for Transform Group = new geometrygroup (); group.tar get = surface; group. id = "group _" + ID; surface. graphicscollection. additem (Group); // create new objects dgfobject = New Path (null); dgfobject. id = ID; dgfobject. data = data; dgfobject. fill = getfillobject (); dgfobj Ect. Stroke = getstrokeobject (); // Add to geometrygroup group. geometrycollection. additem (dgfobject); // transform var matrix: matrix = gettransformmatrix (); If (Matrix! = NULL) group. transform. matrix = matrix;} catch (error: Error) {alert. show (error. message);} // show update // group. draw (null, null);} Other common graphical objects are also similar. Currently, rect, line, path, circle, ellipse, polyline, polygon, image, text, and use are supported. For stroke and fill objects, the degrafa implementation must be added to special locations for use. Therefore, each SVG object must be converted using the fill and stroke attributes, add it to a global stroke or fill group, and then set the drawing. Currently, common, linear, circular, and graphic strokes and filling are supported. Protected function getstrokeobject (): igraphicsstroke {If (strokecolor = NULL) return addnewsolidstroke (); else if (strokecolor. substr (0, 3) = "url") return getstrokefromcollection (); else return addnewsolidstroke ();} protected function addnewsolidstroke (): callback {var newsolidstroke: solidstroke = new solidstroke (); newsolidstroke. id = "solidstroke _" + ID; newsolidstroke. alpha = strokealkaline Ha; newsolidstroke. weight = strokewidth; If (strokecolor = NULL) newsolidstroke. color = NULL; else newsolidstroke. color = Number ("0x" + strokecolor. substr (1); surface. strokecollection. additem (newsolidstroke); Return newsolidstroke;} There are many types of transformations in SVG, including translation, rotation, skew (Skew), and matrix. All transformations can be represented by matrix transformations, transformation of a matrix can be converted to a degrafa matrix object, and then applied to the graphic protected function gettransformmatrix (): matrix {If (transformstr = NULL) return nu Ll; If (transformstr. substr (0, 6 )! = "Matrix") return NULL; var startindex: Int = transformstr. indexof ("("); var endindex: Int = transformstr. indexof (")"); var STR: String = transformstr. substr (startindex + 1, endindex-startindex-1); var matrixdata: array = Str. split (","); var matrix: matrix = new matrix (); matrix. A = matrixdata [0]; matrix. B = matrixdata [1]; matrix. C = matrixdata [2]; matrix. D = matrixdata [3]; matrix. tx = matrixdata [4]; matrix. t Y = matrixdata [5]; return matrix;} through these conversions, You can dynamically display simple SVG images in flex, and other SVG display programs (such as inkscape or ASV ,, firefox. However, because the SVG standard is complex, it takes a considerable amount of work to cover all the SVG standards. These include: l SVG script l SVG Groupl SVG animation l complex multi-level coordinate transformation and so on. In addition, due to the limitations of degrafa in text display (currently degrafa uses textbox to display text ), it is basically impossible to perform advanced operations on text, such as rotating.
