TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

用TWaver做业务流程管理

Posted on 2010-12-09 14:54 TWaver 阅读(1617) 评论(0)  编辑  收藏

这篇文章主要讲述了如何用TWaver做业务流程管理,通过连线的流动和动画体现各业务之间的流程。


首先TWaver提供了流程图需要的各种矢量图形,比如矩形、圆角矩形、圆、椭圆、多边形等等:
1public 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,根据图标透明度和流动偏移量重画连线。

 1private 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, thisnullthis.lineLength/20);
 7  if(centerPoint){
 8   var centerX:Number = centerPoint.x;
 9   var centerY:Number = centerPoint.y;
10   g.lineStyle(30xFF0000, link.getClient("alpha")/255);
11
12   g.drawEllipse(centerX-10, centerY-102020);
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(00);
18  }

19 }
else{
20  var flowingOffset:Number = link.getClient("flowingOffset");
21  var position:Point = this.network.getPosition(Consts.POSITION_FROM,
22   thisnullthis.lineLength*flowingOffset/100.00);
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(0xFFFFFF1);
29   g.drawEllipse(x-linkWidth/2, y-linkWidth/2, linkWidth, linkWidth);
30   g.endFill();
31  }

32 }

33}

源码请到此处下载

只有注册用户登录后才能发表评论。


网站导航: