页面的图形元素有很多的共同点并且有很大的相似性,如都需要拖动, 都需要序列化,等等,所以就抽象出一个父类Node。
所有的图元对象都继承Node,Node继承自UIComponent改类主要提供一些共用的方法,如点击拖动、得到组件中点、所有到组件的连线集合等属性或方法。
对于不同的图元有不用的形状,通过重写UIComponent的updateDisplayList来实现不同形状的绘图。updateDisplayList方法会在组件的状态更改时调用。
(由于是公司项目所以代码只能粘一部分了 )
package com.iyspace.bpmn.utils
{
import com.iyspace.bpmn.view.StyleUtils;
import flash.display.GradientType;
import flash.display.Graphics;
import flash.display.Sprite;
import flash.geom.Matrix;
public class StartEvent extends Node
{
private var view:Sprite = new Sprite();
public function StartEvent()
{
super();
this.addChild(view);
trace("start"+this.width);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth,unscaledHeight);
var w:Number = this.width;
var h:Number = this.height;
var g:Graphics = view.graphics;
var matrix:Matrix = new Matrix();
g.clear();
matrix.createGradientBox(50,50,Math.PI / 2,0,h/2-10);
g.lineStyle(StyleUtils.BORDER_THICK,StyleUtils.BORDER_COLOR,StyleUtils.BORDER_ALPHA);
g.beginGradientFill(GradientType.LINEAR, [StyleUtils.START_COLOR, StyleUtils.END_COLOR], [1, 1], [0, 200], matrix);
g.drawCircle(w/2,h/2,h/2);
g.endFill();
}
}
}
开始节点主要画了一个渐变的圆形。
更多的flex绘图可以去研究一下api