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"); }
感兴趣的可以到他们的网站上看看， 有一些例子和教程，但总体感觉文档不是很全，尤其是简单的示例比较少，使用时需要自己摸索。
本文来自博客，转载请标明出处：http://blog.csdn.net/firefight/archive/2008/04/17/2299460.aspx
