一个FLEX扩展Degrafa简介

最新推荐文章于 2012-03-02 17:21:38 发布

xiaoshan_33

最新推荐文章于 2012-03-02 17:21:38 发布

阅读量948

点赞数

文章标签： flex 扩展图形 matrix path null

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，创建填充和笔画

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