Degrafa简介（www.degrafa.com)
使用FLEX中的Graphics可以轻松创建各种矢量图形， 但是在某些情况下，我们还是需要使用类似SVG的描述式的矢量图形，而且对矢量图形进行交互操作。FLEX中只提供了对SVG的静态处理， 而且不能支持交互操作。Degrafa扩展就是在FLEX中增加了对矢量数据的动态处理，包括动态添加，删除和修改，并支持SVG的路径格式数据， 因此只需要对现有的SVG数据进行一些必要的转换（以后会有工具支持，但现在只能手工完成），就可以将SVG图形显示在FLEX中， 并可以进行动态的，交互的操作了。使用degrafa可以建立从美工到软件开发人员的协作关系， 美工使用Illustrator等工具创建图形， 然后保存到SVG格式中， 之后软件开发人员可以利用这些图形数据进行FLEX编程开发。在其网站上的一个视频教程介绍了其开发的步骤。下面简单介绍一下degrafa的使用步骤和方法。
建立环境
?增加SWC类库
? 创建LIB目录（也可以是其它名称）， 将degrafa库拷贝到LIB目录中
? 项目属性 －> Flex Build Path -> Library Path -> Add Swc Folder,选择LIB
?在MXML中增加名字空间以简化代码
? xmlns:degrafa="http://www.degrafa.com/2007"
? xmlns:paint="com.degrafa.paint.*"
????? xmlns:geometry="com.degrafa.geometry.*"
?
1,建立 Surface
?<degrafa:Surface id="surface1"? verticalCenter="0"? horizontalCenter="0">
?</degrafa:Surface>
2,建立图形GROUP
?<degrafa:GeometryGroup id="degrafa1">
? </degrafa:GeometryGroup>
3,建立图形， 包括圆，椭圆， 直线，曲线， 路径，矩形，多边形等
?<geometry:Circle fill="{blue}" radius="150" id="moon1"/>
?
??????? <geometry:Path fill="{blue}" data="M-0.609,12.535c-3.283,1.939-7.982,4.402-9.4,7.609
???? c-1.418,3.209-1.716,10.223-1.269,12.012s0.819,2.463,2.388,11.342-0.609,12.535z"/>
4，创建填充和笔画
?<!-- Creating fills and strokes-->
??????? <degrafa:fills>
??????????? <paint:SolidFill id="blue" color="#62ABCD" alpha=".6"/>
??????????? <paint:SolidFill id="red" color="#FF00FF" alpha="1"/>
???? <paint:RadialGradientFill id="indicatorFill" angle="0" >
??? <paint:GradientStop ratio="0" alpha="1" color="#FF0000"/>
??? <paint:GradientStop ratio=".5" alpha="1" color="#FFFC00"/>
??? <paint:GradientStop ratio="1" alpha="1" color="#12FF00"/>
???? </paint:RadialGradientFill >
??????? </degrafa:fills>
?????????
??????? <degrafa:strokes>
???????? <paint:SolidStroke id="whiteStrokes" alpha=".25" color="#000000"/>
??????? </degrafa:strokes>
5，在AS中动态添加图形组和图形
? var dataStr = "M 10 10 L 220 120 L 20 220 z";
???
? var group2:GeometryGroup = new GeometryGroup();
? group2.target = surface1;
? surface1.graphicsCollection.addItem(group2);
?
? var dgfPath:Path = new Path(null);
? dgfPath.data = dataStr;
? dgfPath.fill = blue;
? dgfPath.stroke = whiteStrokes;
?
? var currCircle:Circle = new Circle(50,50,150);
? currCircle.fill = red;
?
? //add to geometrygroup
? group2.geometryCollection.addItem(currCircle);
? group2.geometryCollection.addItem(dgfPath);
?
? group2.draw(null,null);
??
6， 坐标变换（好像目前还没有实现TRANSFORM类， 但我们可以通过图形组或Surface的变换方式完成）
?使用变换矩阵进行变换?
? var matrix:Matrix = new Matrix();
? var scaleX:Number = 2.0;
? var scaleY:Number = 3.0;
? var rotation:Number = 2 * Math.PI * (45 / 360);
? var tx:Number = 10;
? var ty:Number = 20;
? matrix.createBox(scaleX,scaleY,rotation,tx,ty);
?
? /*matrix.a=1;
? matrix.b=0;
? matrix.c=0;
? matrix.d=-1;
? matrix.tx=27.376;
? matrix.ty=34.6748;*/
?
? //Apply to a geometry group
? degrafa1.transform.matrix = matrix;???
?除了使用变换矩阵进行变换外，其它简单的变换方式包括缩放，旋转等：
? degrafa1.scaleX = 2;
????? degrafa1.scaleY = 2;
? degrafa1.rotation = 2 * Math.PI * (45 / 360);
?注意好像这些变换都只能发生在图形组和Surface上
7， 事件侦听
?在图形组和SURFACE上可以侦听鼠标和键盘事件， 但在基本图形上似乎只有初始化和属性变化事件处理。
?group2.addEventListener(MouseEvent.CLICK,onClickGroup2);
?private function onClickGroup2(event:MouseEvent):void
?{
? Alert.show("click group2");
?}
感兴趣的可以到他们的网站上看看， 有一些例子和教程，但总体感觉文档不是很全，尤其是简单的示例比较少，使用时需要自己摸索。
?
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/firefight/archive/2008/04/17/2299460.aspx
