一个FLEX扩展Degrafa简介

编程技术  /  houtizong 发布于 3年前   66

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");
}

感兴趣的可以到他们的网站上看看， 有一些例子和教程，但总体感觉文档不是很全，尤其是简单的示例比较少，使用时需要自己摸索。