Degrafa学习一，（含SDK4.0兼容版本及源码，略微有所修改）
我们在学习Degrafa之前首先应该了解Flex和Flash画图之间的异同：
下面是Flex 和Flash 的类继承结构，他们都是继承自Sprite，然后在子类上 Flex 简化或去除了时间轴的感念。
Flex 中的 UI元素 大都继承自 UIComponent类
UIComponent>FlexSprite>Sprite >DisplayObjectContainer>InteractiveObject >Displayobject
Flash 中的架构 (Sprite类的继承关系)
MovieClip > Sprite > DisplayObjectContainer > InteractiveObject >Displayobject
Flex 中无法直接使用Flash 中的MovieClip元件。只能通过工具 将Flash MovieClip 转成 UIMovieClip, UIMovieClip 继承自 MovieClip, MovieClip 类用于实现其使用方式与普通 Flex 组件一样的某个 Flash 组件的必要接口。因此，MovieClip 的子类可以用作 Flex 容器的子项或外观，它可以响应事件、定义视图状态和转换，还可以像所有 Flex 组件一样使用效果。
所有的Flex的图形必须添加到UIComponent的对象中才能在Application中被显示出来。
接下来我们开始讲Degrafa
Degrafa是一套很强大的图形算法类库，并且开源，他为我们封装好了一些图形原件和容器，开发人员可以直接使用这些图形原件，并修改内部属性。
在Degrafa库中图形的属性修改会自动影响到图形的显示。
这里我们拿圆形来了解Degrafa是怎么一个原理来画图的：
系统默认的画圆方式是（如下图）：
var circle2:Sprite = new Sprite();
circle2.graphics.beginFill(0x00CCFF);
circle2.graphics.drawCircle(80, 40, 40);
而Degrafa的画圆方式是通过线来实现的，他有两个属性stroke和fill来控制内部填充和外部环绕。
我们看一下geometry.Circle的preDraw函数,里面的addMoveTo是设置起点，addCurveTo是设置弧度，由此来画图
commandStack.addMoveTo(
centerX+Math.cos(anchorAngle)*radius,
centerY+Math.sin(anchorAngle)*radius);
var i:int=0;
//loop through and add the curve commands
for (i; i<accuracy; ++i) {
controlAngle = anchorAngle+span;
anchorAngle = controlAngle+span;
commandStack.addCurveTo(
centerX + Math.cos(controlAngle)*controlRadius,
centerY + Math.sin(controlAngle)*controlRadius,
centerX + Math.cos(anchorAngle)*radius,
centerY + Math.sin(anchorAngle)*radius)
};
个人觉得，Degrafa的内部运行机制就是提供了诸如addCurveTo之类的一套很强大的图形算法类库。
这里我写了一个硬编码的画圆形方式：
package {
import com*.IGeometry;
import com.*.geometry.Geometry;
import flash.display.Graphics;
import flash.geom.Rectangle;
//--------------------------------------
// Other metadata
//--------------------------------------
[Bindable]
public class Hec extends Geometry implements IGeometry{
public function Hec(){
super();
}
override public function preDraw():void{
commandStack.source.length = 0;
commandStack.addMoveTo(150,100);
commandStack.addCurveTo(150,150,100,150);
commandStack.addCurveTo(50,150,50,100);
commandStack.addCurveTo(50,50,100,50);
commandStack.addCurveTo(150,50,150,100);
//commandStack.addLineTo(200,200);
invalidated = false;
}
override public function draw(graphics:Graphics,rc:Rectangle):void{
preDraw();
//apply the fill retangle for the draw
super.draw(graphics,(rc)? rc:bounds);
}
}
}
调用的类：
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="1024" height="900" minWidth="955" minHeight="600" creationComplete="init()">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import com.annpro.base.geometry.Circle;
import com.annpro.base.geometry.CubicBezier;
import com.annpro.base.paint.SolidStroke;
import mx.containers.Canvas;
import mx.graphics.Stroke;
public function init():void{
import com.annpro.base.GeometryGroup;
import com.annpro.base.Surface;
var su:Surface=new Surface();
var gg:GeometryGroup=new GeometryGroup();
var _graphObjects1:Array=new Array;
_graphObjects1.push(gg);
su.graphicsData=_graphObjects1;
var line:Hec=new Hec();
//line.data="125 0 375";
var stroke:SolidStroke=new SolidStroke(0x444444,1,5);
line.stroke=stroke;
var _graphObjects:Array=new Array;
_graphObjects.push(line);
gg.geometry=_graphObjects;
var can:Canvas=new Canvas();
can.addChild(su);
this.addElement(can);
}
]]>
</fx:Script>
</s:Application>
是不是也获得了一个圆形，可能不是很圆，大家谅解。。。。。。。。