当前位置: 代码迷 >> Web前端 >> 仿IBM-BPM Monitor兑现的demo
  详细解决方案

仿IBM-BPM Monitor兑现的demo

热度:229   发布时间:2012-11-04 10:42:41.0
仿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;//箭头向上
				else
					aspect=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();
		}
		
	}
}

1 楼 rongxh2010 2010-12-25  
Point这个类的代码贴来看看,呵呵
2 楼 shlei 2010-12-27  
rongxh2010 写道
Point这个类的代码贴来看看,呵呵

不好意思,因为是在公司做的,所以有相关的保密约束,不过我可以贴出来小部分代码,剩下的就要你举一反三了。
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  
挺好的,学习中
  相关解决方案