利用Degrafa框架在FLEX中动态显示和操作SVG文档

 

利用degrafa框架在FLEX中动态显示和操作SVG文档

Degrafa框架已经非常接近在FLEX中动态显示和操作SVG文档了，通过一些简单的转换, 基本上能够实现对SVG图形进行显示和操作。这样大量的SVG图形资源就可以直接在FLEX应用程序中使用了。

 

基本思路如下:

       在MXML添加degrafa Surface对象, 读取SVG文档, 将其中的图形表示为degrafa图形对象, 动态添加到Surface中. 然后通过对象ID可以操作这些图形元素。

       由于SVG文档为XML格式, 可以方便的读取这些图形元素.

 

首先在MXML中增加degrafa surface作为显示图形的画布

              <degrafa:Surface id="surface1" x="0" y="0" >

           </degrafa:Surface>

 

然后在装载SVG图形文件后遍历其图形对象

 

 // 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();

                         }

              ………………

注意到为每个SVG对象建立了一个相应的FLEX对象，其父类为一个图形类SvgGraphic， 然后派生出SvgRect, SvgPath等具体的子类。每个子类负责完成自己的属性设置和显示操作。

例如SvgPath在创建时读取了相应节点的属性， 包括fill, stroke等

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();

              }

 

然后在显示时创建相应的degrafa对象， 并应用这些属性

              public function show():void

              {

                     try

                     {

                            //Create new group for transform

                            group = new GeometryGroup();

                            group.target = 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();

                            dgfObject.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);

              }

 

其它普通的图形对象也类似实现， 目前可以支持Rect, Line, Path, Circle, Ellipse, PolyLine, Polygon, Image, Text和Use。

对Stroke和Fill对象，在degrafa的实现必须添加到特殊的位置进行使用， 因此对每个SVG对象使用Fill和Stroke属性转换对象，添加到全局的笔画或填充组中，然后对图形进行设置。目前可以支持普通，线性，圆形和图形笔画和填充。

 

protected function getStrokeObject():IGraphicsStroke

              {

                     if(strokeColor == null)

                            return addNewSolidStroke();

                     else if(strokeColor.substr(0,3) == "url")

                            return getStrokeFromCollection();

                     else

                            return addNewSolidStroke();

              }

             

              protected function addNewSolidStroke():IGraphicsStroke

              {

                     var newSolidStroke:SolidStroke = new SolidStroke();

                     newSolidStroke.id = "SolidStroke_" + id;

                     newSolidStroke.alpha = strokeAlpha;

                     newSolidStroke.weight = strokeWidth;

                    

                     if(strokeColor == null)

                            newSolidStroke.color = null;

                     else

                            newSolidStroke.color = Number("0x" + strokeColor.substr(1));

                           

                     surface.strokeCollection.addItem(newSolidStroke);

                           

                     return newSolidStroke;

              }

 

SVG中的变换种类很多， 包括平移，旋转，歪斜（SKEW)和矩阵， 所有的变换都可以用矩阵变换表示， 矩阵的变换可以转换为Degrafa矩阵对象，然后应用到图形上

 

protected function getTransformMatrix():Matrix

              {

                     if(transformStr == null)

                            return null;

                                  

                     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.ty=matrixData[5];

                           

                     return matrix;

              }

 

通过这些转换， 可以将简单的SVG图形动态显示在FLEX中，与其它SVG显示程序（例如INKSCAPE或ASV,，FIREFOX）中的效果基本保持一致。但由于SVG标准本身比较复杂，需要相当大的工作量才能覆盖全部的SVG标准。其中包括：

l         SVG脚本

l         SVG Group

l         SVG动画

l         复杂的多层次坐标变换等

 

另外由于degrafa在文本显示中的局限性（目前degrafa利用TEXTBOX显示文本），基本无法实现文本的高级操作，例如旋转等。