Posted on 2010-12-09 14:54
TWaver 閱讀(1624)
評論(0) 編輯 收藏
這篇文章主要講述了如何用TWaver做業務流程管理，通過連線的流動和動畫體現各業務之間的流程。
首先TWaver提供了流程圖需要的各種矢量圖形，比如矩形、圓角矩形、圓、橢圓、多邊形等等：
1
public static const SHAPE_RECTANGLE:String = "rectangle";
2public static const SHAPE_OVAL:String = "oval";
3public static const SHAPE_ROUNDRECT:String = "roundrect";
4public static const SHAPE_STAR:String = "star";
5public static const SHAPE_TRIANGLE:String = "triangle";
6public static const SHAPE_CIRCLE:String = "circle";
7public static const SHAPE_HEXAGON:String = "hexagon";
8public static const SHAPE_PENTAGON:String = "pentagon";
9public static const SHAPE_DIAMOND:String = "diamond";
而且能設置這些矢量的各種參數，比如線條樣式、粗細、顏色、填充顏色、漸變樣式、漸變色、3D效果等等：
1public static const VECTOR_OUTLINE_PATTERN:String = "vector.outline.pattern";
2public static const VECTOR_OUTLINE_WIDTH:String = "vector.outline.width";
3public static const VECTOR_OUTLINE_COLOR:String = "vector.outline.color";
4public static const VECTOR_FILL_COLOR:String = "vector.fill.color";
5public static const VECTOR_GRADIENT:String = "vector.gradient";
6public static const VECTOR_GRADIENT_COLOR:String = "vector.gradient.color";
7public static const VECTOR_DEEP:String = "vector.deep";
另外TWaver也提供了流程圖需要的各種線條樣式：
1public static const LINK_TYPE_ARC:String = "arc";
2public static const LINK_TYPE_TRIANGLE:String = "triangle";
3public static const LINK_TYPE_PARALLEL:String = "parallel";
4public static const LINK_TYPE_FLEXIONAL:String = "flexional";
5public static const LINK_TYPE_FLEXIONAL_HORIZONTAL:String = "flexional.horizontal";
6public static const LINK_TYPE_FLEXIONAL_VERTICAL:String = "flexional.vertical";
7public static const LINK_TYPE_ORTHOGONAL:String = "orthogonal";
8public static const LINK_TYPE_ORTHOGONAL_HORIZONTAL:String = "orthogonal.horizontal";
9public static const LINK_TYPE_ORTHOGONAL_VERTICAL:String = "orthogonal.vertical";
10public static const LINK_TYPE_HORIZONTAL_VERTICAL:String = "orthogonal.H.V";
11public static const LINK_TYPE_VERTICAL_HORIZONTAL:String = "orthogonal.V.H";
12public static const LINK_TYPE_EXTEND_TOP:String = "extend.top";
13public static const LINK_TYPE_EXTEND_LEFT:String = "extend.left";
14public static const LINK_TYPE_EXTEND_BOTTOM:String = "extend.bottom";
15public static const LINK_TYPE_EXTEND_RIGHT:String = "extend.right";
而且也能設置線條的箭頭樣式：
1public static const ARROW_FROM:String = "arrow.from";
2public static const ARROW_FROM_FILL:String="arrow.from.fill";
3public static const ARROW_FROM_ALPHA:String="arrow.from.alpha";
4public static const ARROW_FROM_SHAPE:String = "arrow.from.shape";
5public static const ARROW_FROM_COLOR:String = "arrow.from.color";
6public static const ARROW_FROM_XOFFSET:String = "arrow.from.xoffset";
7public static const ARROW_FROM_YOFFSET:String = "arrow.from.yoffset";
8public static const ARROW_FROM_WIDTH:String = "arrow.from.width";
9public static const ARROW_FROM_HEIGHT:String = "arrow.from.height";
10public static const ARROW_FROM_OUTLINE_COLOR:String = "arrow.from.outline.color";
11public static const ARROW_FROM_OUTLINE_ALPHA:String = "arrow.from.outline.alpha";
12public static const ARROW_FROM_OUTLINE_WIDTH:String = "arrow.from.outline.width";
13public static const ARROW_FROM_OUTLINE_PATTERN:String = "arrow.from.outline.pattern";
14public static const ARROW_FROM_AT_EDGE:String = "arrow.from.at.edge";
有了這些基本元素后，就可以開始流程圖的制作了。這里主要介紹一下如何實現連線的流動和動畫效果。基本思路是先起一個Timer，設置連線上閃爍圖標的透明度（0-255）以及流動的偏移量（0-100），再重載LinkUI.drawBody，根據圖標透明度和流動偏移量重畫連線。
1
private function tick(event:TimerEvent = null):void 
{
2
iconAlpha -= 40;
3 flowingOffset += 5;
4
if(iconAlpha<0){
5 iconAlpha = 255;
6
}
7 if(flowingOffset>100){
8 flowingOffset = 0;
9 }
10 box.forEach(function(element:IElement):void{
11 if(element is Link){
12 if(element.getClient("status") != "normal"){
13 element.setClient("alpha", iconAlpha);
14 }else{
15 element.setClient("flowingOffset", flowingOffset);
16 }
17 }
18 });
19
}
1override protected function drawBody(g:Graphics):void{
2 super.drawBody(g);
3
4 if(link.getClient("status") != "normal"){
5 var centerPoint:Point = this.network.getPosition(
6 Consts.POSITION_FROM, this, null, this.lineLength/2, 0);
7 if(centerPoint){
8 var centerX:Number = centerPoint.x;
9 var centerY:Number = centerPoint.y;
10 g.lineStyle(3, 0xFF0000, link.getClient("alpha")/255);
11
12 g.drawEllipse(centerX-10, centerY-10, 20, 20);
13 var offset:Number = Math.sqrt(10)*2;
14 g.moveTo(centerX-offset, centerY-offset);
15 g.lineTo(centerX+offset, centerY+offset);
16
17 g.moveTo(0, 0);
18 }
19 }else{
20 var flowingOffset:Number = link.getClient("flowingOffset");
21 var position:Point = this.network.getPosition(Consts.POSITION_FROM,
22 this, null, this.lineLength*flowingOffset/100.0, 0);
23 if(position){
24 var x:Number = position.x;
25 var y:Number = position.y;
26 var linkWidth:Number = link.getStyle(Styles.LINK_WIDTH)+2;
27 g.lineStyle();
28 g.beginFill(0xFFFFFF, 1);
29 g.drawEllipse(x-linkWidth/2, y-linkWidth/2, linkWidth, linkWidth);
30 g.endFill();
31 }
32 }
33}
源碼請到此處下載