`

一个FLEX扩展Degrafa简介

    博客分类:
  • flex
阅读更多
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");
}

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

相关推荐

    关于Degrafa's Fills简介

    Degrafa's Fills是一个在Flex开发中用于图形渲染的开源库,它为开发者提供了丰富的图形填充效果。这篇博文的作者分享了如何将 Degrafa 的填充功能集成到其他Flex项目中的方法,通过一个名为“sign05.mxml”的示例...

    SvgToDegrafa.rar_SvgToDegrafa_degrafa_flex

    Degrafa 是一个基于Flex的图形库,它扩展了Flex的图形能力,提供了更强大的矢量图形处理和动画功能。通过使用 Degrafa,开发者可以在Flex应用中实现复杂的图形绘制、交互和动画效果。 “SvgToDegrafa.as”是这个...

    Degrafa帮助文档

    Degrafa 是一个开源库,它扩展了 Flex 框架,提供了高级图形渲染和编辑功能。它的设计目标是简化矢量图形的编程,让开发者可以像使用传统绘图软件一样自由地创建和操作矢量图形,但这一切都是通过编程来完成的。 2...

    关于DEGRAFA的简介

    DEGRAFA是一个强大的图形绘制库,它基于ActionScript 3,专门为Adobe Flash和Flex平台设计。这个库的主要目的是提供一种高效、灵活的方式来创建和操作矢量图形,类似于SVG(Scalable Vector Graphics)在Web开发中的...

    degrafa绘图工具 svg操作

    对于需要在Web应用中展示复杂图形的开发者来说,DeGrafa是一个非常有价值的工具,它不仅能够帮助你创建美观的图形,还能提供丰富的交互功能,提升用户体验。 总结来说,DeGrafa是一款优秀的SVG图形处理工具,结合...

    degrafa源代码

    Degrafa扩展就是在FLEX中增加了对矢量数据的动态处理,包括动态添加,删除和修改,并支持SVG的路径格式数据, 因此只需要对现有的SVG数据进行一些必要的转换(以后会有工具支持,但现在只能手工完成),就可以将SVG...

    Degrafa(Beta3)

    2. **图形组件库**: Degrafa提供了一个丰富的图形组件库,包括形状、路径、曲线、渐变等基本元素,以及更复杂的图表和动画效果。这些组件可重用性强,易于定制,有助于快速搭建图形用户界面。 3. **交互性**: ...

    一些不错的开源Flex项目.txt

    - **简介**:Flexbox 是一个基于Flex布局的工具,由Mrinal Wadhwa创建。该项目提供了一个易于使用的界面,帮助开发者快速实现Flex布局效果。 - **特点**: - 简单易用:通过直观的用户界面调整Flex容器及子元素的...

    专题资料(2021-2022年)Flex开源项目.docx

    15. **OpenFlux**: 宣称是一个开放源码的Flex组件框架,旨在提供灵活且可扩展的组件解决方案。 这些Flex开源项目为开发者提供了丰富的工具和资源,不仅可以加速开发过程,还能提高应用的质量和用户体验。通过参与和...

    flex开源项目介绍.doc

    11. Flex拖拽库(http://code.google.com/p/flex-drag-n-drop-lib/):一个专门处理拖放操作的库,简化了Flex应用中的拖放功能实现。 12. BirdEye(http://code.google.com/p/birdeye/):大型项目,涵盖了数据可视...

    专题资料(2021-2022年)flex开源项目介绍.doc

    【Flex开源项目】是开发界的一个重要领域,它主要指的是基于Adobe Flex技术的开源软件项目。Flex是一种用于构建富互联网应用程序(RIA)的框架,它使用ActionScript 3(AS3)编程语言和MXML标记语言。这些开源项目为...

Global site tag (gtag.js) - Google Analytics