仿IBM-BPM Monitor实现的demo前段时间根据公司要求做一个工作流方面的demo，遂模仿IBM的BPM Monitor做了一
仿IBM-BPM Monitor实现的demo
前段时间根据公司要求做一个工作流方面的demo，遂模仿IBM的BPM Monitor做了一个demo。因Company Secret原因，不能公开全部源码，现将部分代码贴于此，供各位大虾点评。
画线代码：
package com{import flash.geom.Point;import mx.controls.Text;import mx.core.UIComponent;/** * * 控制流程图的画线 * * */public class Line extends UIComponent{/** 线段的显示文本 **/public var label:String;/** 箭头大小 **/public var arrowSize:uint = 3;/** 线的颜色 **/public var lineColor:uint = 0xffffff;/** 箭头方向 **/private var aspect:int=1;/** 开始的一段直线长度 **/private var startLine:int=10;/** 线的名称 **/private var _label:Text;/** 开始节点 **/private var startPoint:Point;/** 结束节点 **/private var endPoint:Point;/** 线段连接的开始节点名称 **/public var fromNode:String;/** 线段连接的结束节点名称 **/public var toNode:String;/** 初始化文本样式 **/private static var classConstructed:Boolean = Nodes.initStyles();public function Line(){super();}/** 创建组建的子组件 **/override protected function createChildren():void{super.createChildren();if(!_label){_label=new Text();var textStyleName:*=getStyle("textStyleName");_label.styleName=textStyleName?textStyleName:this;addChild(_label);}}/** 更改属性 **/override protected function commitProperties():void{super.commitProperties();if(_label){_label.text=label;}}/** 在组建中画出子组件，并确定子组件在组件中的位置和大小 **/override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{super.updateDisplayList(unscaledWidth,unscaledHeight);if(!_label)return;//endPoint.x-startPoint.x,endPoint.y-startPoint.y_label.move(0,0);_label.setActualSize(width,30);}/** 带箭头的线 **/private function drawLine(startPoint:Point,endPoint:Point,startL:int):void{getLine(startPoint,endPoint,startL);drawArrowHead(startPoint,endPoint);}/** 自定义画线 **/public function cusLine(arr:Array):void{var len:int=arr.length;if(len==0)return;if(len==1){var p:Object=arr[0] as Object;this.graphics.clear();//清除之前的画线痕迹drawLine(p.sPoint as Point,p.ePoint as Point,p.sLine as int);return;}for(var i:int=0;i<arr.length;i++){var points:Object=arr[i] as Object;getLine(points.sPoint as Point,points.ePoint as Point,points.sLine as int);}drawArrowHead(Object(arr[len-1]).sPoint as Point,Object(arr[len-1]).ePoint as Point);}/** 画线 **/private function getLine(startPoint:Point,endPoint:Point,startL:int):void{this.startPoint=startPoint;this.endPoint=endPoint;if(startL>0)startLine=startL;this.graphics.moveTo(startPoint.x,startPoint.y);this.graphics.lineStyle(2,lineColor,0.7);//用于确定根据开始节点和结束节点画出的线是否是直线if(startPoint.x==endPoint.x||startPoint.y==endPoint.y){this.graphics.lineTo(endPoint.x,endPoint.y);//确定箭头的方向if(startPoint.y==endPoint.y&&startPoint.x<endPoint.x)aspect=1;//箭头向右else if(startPoint.y==endPoint.y&&startPoint.x>endPoint.x)aspect=2;//箭头向左else if(startPoint.y>endPoint.y&&startPoint.x==endPoint.x)aspect=3;//箭头向上elseaspect=4;//箭头向下}else{//开始节点横坐标小于结束节点时if(startPoint.x<endPoint.x){aspect=1;this.graphics.lineTo(startPoint.x+startLine,startPoint.y);//开始节点纵坐标小于结束节点时，改变弧线的方向if(startPoint.y<endPoint.y){this.graphics.curveTo(startPoint.x+startLine+10,startPoint.y,startPoint.x+startLine+10,startPoint.y+10);this.graphics.lineTo(startPoint.x+startLine+10,endPoint.y-10);this.graphics.curveTo(startPoint.x+startLine+10,endPoint.y,startPoint.x+startLine+20,endPoint.y);}else{this.graphics.curveTo(startPoint.x+startLine+10,startPoint.y,startPoint.x+startLine+10,startPoint.y-10);this.graphics.lineTo(startPoint.x+startLine+10,endPoint.y+10);this.graphics.curveTo(startPoint.x+startLine+10,endPoint.y,startPoint.x+startLine+20,endPoint.y);}this.graphics.lineTo(endPoint.x,endPoint.y);}else{//开始节点横坐标大于结束节点时aspect=2;this.graphics.lineTo(startPoint.x-startLine,startPoint.y);if(startPoint.y<endPoint.y){this.graphics.curveTo(startPoint.x-startLine-10,startPoint.y,startPoint.x-startLine-10,startPoint.y+10);this.graphics.lineTo(startPoint.x-startLine-10,endPoint.y-10);this.graphics.curveTo(startPoint.x-startLine-10,endPoint.y,startPoint.x-startLine-20,endPoint.y);}else{this.graphics.curveTo(startPoint.x-startLine-10,startPoint.y,startPoint.x-startLine-10,startPoint.y-10);this.graphics.lineTo(startPoint.x-startLine-10,endPoint.y+10);this.graphics.curveTo(startPoint.x-startLine-10,endPoint.y,startPoint.x-startLine-20,endPoint.y);}this.graphics.lineTo(endPoint.x,endPoint.y);}}startLine=10;//还原初始值} /** 画箭头 **/private function drawArrowHead(startPoint:Point,endPoint:Point):void{//得到箭头的角度var angle:Number = this.getAngle(startPoint,endPoint);var centerX:Number = endPoint.x - arrowSize * Math.cos(angle*(Math.PI/180));var centerY:Number = endPoint.y + arrowSize * Math.sin(angle*(Math.PI/180)); var leftX:Number = centerX + arrowSize * Math.cos((angle+120)*(Math.PI/180));var leftY:Number = centerY - arrowSize * Math.sin((angle+120)*(Math.PI/180));var rightX:Number = centerX + arrowSize * Math.cos((angle+240)*(Math.PI/180));var rightY:Number = centerY - arrowSize * Math.sin((angle+240)*(Math.PI/180)); this.graphics.lineStyle(2,lineColor,1);this.graphics.moveTo(endPoint.x,endPoint.y);this.graphics.lineTo(leftX,leftY);this.graphics.lineTo(centerX,centerY);this.graphics.lineTo(rightX,rightY);this.graphics.lineTo(endPoint.x,endPoint.y);}/** 得到箭头的角度 **/private function getAngle(startPoint:Point,endPoint:Point):Number{var temX:Number = 0;var temY:Number = 0;//调整箭头方向switch(aspect){case 1://箭头向右temX= endPoint.x - (endPoint.x-10);temY= endPoint.y - endPoint.y;break;case 2://箭头向左temX= endPoint.x - (endPoint.x+10);temY= endPoint.y - endPoint.y;break;case 3://箭头向上temX= endPoint.x - endPoint.x;temY= endPoint.y - (endPoint.y-10);break;case 4://箭头向下temX= endPoint.x - endPoint.x;temY= endPoint.y - (endPoint.y+10);break;}var angle:Number = Math.atan2(temY,temX)*(180/Math.PI)return angle;}/** 删除 **/public function removeLine():void{this.graphics.clear();}}}graphics.clear();graphics.lineStyle(2,lineColor,1);var fillType:String=GradientType.LINEAR;var color:Array=[0XFFFFFF, 0XCDE891];var alphas:Array=[1,1];var ratios:Array=[0x00,0xff];var matr:Matrix=new Matrix();matr.createGradientBox(width,height,Math.PI/4,0,0);var spreadMethod:String=SpreadMethod.PAD;graphics.beginGradientFill(fillType,color,alphas,ratios,matr,spreadMethod);graphics.drawCircle(unscaledWidth/2,CIRCLE_RADIUS,CIRCLE_RADIUS);graphics.endFill();3 楼 andy_ghg 2011-01-07 我写了一个类似的东西，不过不是用来做流程设计的，是用来展现数据的，不过基础组件应该是差不多的，不过我现在遇到一个问题，就是那个工作区的问题，我现在想做成跟BPM一样的工作区，就是将组件拖拽至边缘后会自动出现滚动条。我现在基本上都做的差不多了，就差这一个实现了，想请教一下你是怎么做的，我现在用的是Flexlib里面的DragCanvas这个开源的组件，但是做scale的时候会出现问题，所以想自己写一个。
留个Email，andy_ghg@163.com希望在这方面能多交流，我这边完成的组件有Node，Line，ZoomPanel(就是缩略图)。线是带箭头且不深入到节点内部的，Node是用的FXG做图标的。 4 楼 shlei 2011-01-07 andy_ghg 写道我写了一个类似的东西，不过不是用来做流程设计的，是用来展现数据的，不过基础组件应该是差不多的，不过我现在遇到一个问题，就是那个工作区的问题，我现在想做成跟BPM一样的工作区，就是将组件拖拽至边缘后会自动出现滚动条。我现在基本上都做的差不多了，就差这一个实现了，想请教一下你是怎么做的，我现在用的是Flexlib里面的DragCanvas这个开源的组件，但是做scale的时候会出现问题，所以想自己写一个。
留个Email，andy_ghg@163.com希望在这方面能多交流，我这边完成的组件有Node，Line，ZoomPanel(就是缩略图)。线是带箭头且不深入到节点内部的，Node是用的FXG做图标的。
那个我暂时还没有做出来，我在做业务方面的东西，不过我有个思路：你把你的流程图的容器的宽定义为距离容器原点横坐标最远的节点X轴加上节点的宽度，纵坐标也一样，然后再给流程图所在容器的父容器加一个slider，当流程图容器被拖拽超出流程图容器的父容器时，slider增加长度，这个slider有属性可以设置。 5 楼 andy_ghg 2011-03-06 shlei 写道andy_ghg 写道我写了一个类似的东西，不过不是用来做流程设计的，是用来展现数据的，不过基础组件应该是差不多的，不过我现在遇到一个问题，就是那个工作区的问题，我现在想做成跟BPM一样的工作区，就是将组件拖拽至边缘后会自动出现滚动条。我现在基本上都做的差不多了，就差这一个实现了，想请教一下你是怎么做的，我现在用的是Flexlib里面的DragCanvas这个开源的组件，但是做scale的时候会出现问题，所以想自己写一个。
留个Email，andy_ghg@163.com希望在这方面能多交流，我这边完成的组件有Node，Line，ZoomPanel(就是缩略图)。线是带箭头且不深入到节点内部的，Node是用的FXG做图标的。
那个我暂时还没有做出来，我在做业务方面的东西，不过我有个思路：你把你的流程图的容器的宽定义为距离容器原点横坐标最远的节点X轴加上节点的宽度，纵坐标也一样，然后再给流程图所在容器的父容器加一个slider，当流程图容器被拖拽超出流程图容器的父容器时，slider增加长度，这个slider有属性可以设置。
好的，谢谢你的提醒，我一会去试试，最近在做SSO，搞得头大，好久没忙活前端了。 6 楼 shlei 2011-03-07 andy_ghg 写道shlei 写道andy_ghg 写道我写了一个类似的东西，不过不是用来做流程设计的，是用来展现数据的，不过基础组件应该是差不多的，不过我现在遇到一个问题，就是那个工作区的问题，我现在想做成跟BPM一样的工作区，就是将组件拖拽至边缘后会自动出现滚动条。我现在基本上都做的差不多了，就差这一个实现了，想请教一下你是怎么做的，我现在用的是Flexlib里面的DragCanvas这个开源的组件，但是做scale的时候会出现问题，所以想自己写一个。
留个Email，andy_ghg@163.com希望在这方面能多交流，我这边完成的组件有Node，Line，ZoomPanel(就是缩略图)。线是带箭头且不深入到节点内部的，Node是用的FXG做图标的。
那个我暂时还没有做出来，我在做业务方面的东西，不过我有个思路：你把你的流程图的容器的宽定义为距离容器原点横坐标最远的节点X轴加上节点的宽度，纵坐标也一样，然后再给流程图所在容器的父容器加一个slider，当流程图容器被拖拽超出流程图容器的父容器时，slider增加长度，这个slider有属性可以设置。
好的，谢谢你的提醒，我一会去试试，最近在做SSO，搞得头大，好久没忙活前端了。
不好意思，我说的是scroller，不是slider，之前打错了。 7 楼 421081646 2012-08-08 挺好的，学习中