使用Flex开发Activiti流程设计器(二 绘制图元)
页面的图形元素有很多的共同点并且有很大的相似性,如都需要拖动, 都需要序列化,等等,所以就抽象出一个父类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
?
?
?
?
呵呵学习中