应用Flex开发Activiti流程设计器（二 绘制图元）

使用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