正在做的flex流程图

最近快有一个月都在忙这个，希望能和研究过这个问题的朋友一起交流交流

贴两个部件的部分代码：

Component.as

 

package component{import base.*;import flash.display.Bitmap;import flash.display.BitmapData;import flash.display.Loader;import flash.events.*;import flash.geom.ColorTransform;import flash.geom.Point;import flash.net.URLRequest;import mx.controls.Image;import mx.controls.Label;import mx.controls.TextArea;import mx.core.UIComponent;import mx.events.DragEvent;import mx.managers.DragManager;public class Component extends Base{private var url:String ="BreakIMG.png";public static var ddKey:String="addRound";private var colorType:ColorTransform=new ColorTransform();private var imgArray:Array=[4];private var lineArray:Array=new Array();//private var textAre:TextArea=new TextArea();//private var label:Label=new Label();//private var labelSize:int=11;//private var labelColor:uint=0x0B333C;private var bit:Bitmap;private var bitData:BitmapData;private var imgSoce:Image=new Image();private var centerPoint:Point=new Point();private var loader:Loader = new Loader();public function Component(types:int,urls:String="BreakIMG.png"){this.type=types;this.alpha=1;this.width=80;this.height=80; var dis:UIComponent=new UIComponent(); textAre.width=this.width-20; textAre.alpha=0.5; textAre.width=this.width; textAre.height=this.height; label.x=20; label.y=20; label.width=this.width-20; label.height=this.height-20; url=urls; setLoader();dis.addChild(loader); this.doubleClickEnabled=true; this.transform.colorTransform=Data.colorType1; addChild(dis); addChild(label); configureListeners(); }//添加侦听private function configureListeners():void { addEventListener(MouseEvent.CLICK,componentClick); addEventListener(MouseEvent.DOUBLE_CLICK,doubleClick); addEventListener(MouseEvent.MOUSE_DOWN,componentDown); addEventListener(MouseEvent.MOUSE_UP,componentUp); addEventListener(MouseEvent.MOUSE_OVER,componentOver); addEventListener(DragEvent.DRAG_ENTER,frameEnter); addEventListener(MouseEvent.MOUSE_MOVE,componentMove); addEventListener(DragEvent.DRAG_EXIT,frameExit); } private function addTextArea():void { textAre.text=label.text; textAre.transform.colorTransform=Data.colorType1; this.addChild(textAre); textAre.setFocus(); textAre.addEventListener(FocusEvent.FOCUS_OUT,rmoveTextArea); } private function rmoveTextArea(e:FocusEvent):void { label.text=textAre.text; textAre.removeEventListener(FocusEvent.FOCUS_OUT,rmoveTextArea); this.removeChild(textAre); } //设置中心点 private function setCenterPoint():void { centerPoint.x=this.x+width/2;centerPoint.y=this.y+height/2; } //设置加载器 private function setLoader():void { var request:URLRequest = new URLRequest(url); loader.x =0; loader.load(request); } private function dragOut(event:MouseEvent):void { } private function doubleClick(e:Event):void { addTextArea(); } private function dragOver(event:MouseEvent):void { removeEventListener(MouseEvent.MOUSE_UP,componentUp);removeEventListener(MouseEvent.MOUSE_DOWN,componentDown); addEventListener(MouseEvent.MOUSE_MOVE,moves); } private function componentClick(event:MouseEvent):void { } private function componentDown(event:MouseEvent):void { event.currentTarget.startDrag(); if(!selected){ selected=true; container.selectComponent=this; } repaint(); } private function componentUp(event:MouseEvent):void { event.currentTarget.stopDrag(); adjustmentPoint(); setCenterPoint(); updateLineArray(); } private function componentMove(event:MouseEvent):void { setCenterPoint(); updateLineArray(); } private function componentOver(event:MouseEvent):void { } //校正坐标 public function adjustmentPoint():void { var x_move:Number=this.x-int(this.x/Data.cellW)*Data.cellW; var y_move:Number=this.y-int(this.y/Data.cellH)*Data.cellH; if(x_move>=Data.cellW/2) { this.x=int(this.x/Data.cellW+1)*Data.cellW; }else { this.x=int(this.x/Data.cellW)*Data.cellW; } if(y_move>=Data.cellH/2) { this.y=int(this.y/Data.cellH+1)*Data.cellH; }else { this.y=int(this.y/Data.cellH)*Data.cellH; } } private function moves(event:MouseEvent):void{ this.width=Math.abs(this.parent.mouseX-this.x);this.initialize();setCenterPoint();updateLineArray();} private function testOut(event:Event):void { } private function frameExit(e:DragEvent):void { lineArray.splice(lineArray.lastIndexOf(e.dragInitiator.owner),1); } private function frameDrop(e:DragEvent):void { } private function frameEnter(e:DragEvent):void { if(e.dragSource.hasFormat(ddKey)) { DragManager.acceptDragDrop(Line(e.dragInitiator.owner)); setCenterPoint(); insertLineList(Line(e.dragInitiator.owner)); Line(e.dragInitiator.owner).x=0; Line(e.dragInitiator.owner).y=0; Round(e.dragInitiator).removeOwn(); Line(e.dragInitiator.owner).removeChildLine(); if(Line(e.dragInitiator.owner).sCompoent.type!=0&&Line(e.dragInitiator.owner).eCompoent.type!=0) { Line(e.dragInitiator.owner).configureListeners(); } switch(Round(e.dragInitiator).pointType) { case 0: Line(e.dragInitiator.owner).sCompoent=this; break; case 1: Line(e.dragInitiator.owner).eCompoent=this; break; } } } override public function repaint():void { if(this.selected){ this.transform.colorTransform=Data.colorType2; }else{ this.transform.colorTransform=Data.colorType1; } } public function accept(p:Point):Boolean{ if(p.x<this.x||p.y<this.y||(this.x+this.width)<p.x||(this.y+this.height)<p.y){ return false; }else{ centerPoint=new Point(this.x+this.width/2,this.y+this.height/2); return true; } } public function removeLine(l:Line):void { lineArray.splice(lineArray.lastIndexOf(l),1); } private function updateLineArray():void { for(var i:int=0;i<lineArray.length;i++) { if(Line(lineArray[i]).sCompoent==this){ Line(lineArray[i]).updataStartComponent(); }else{ Line(lineArray[i]).updataEndComponent(); } } } public function insertLineList(l:Line):void { if(lineArray.lastIndexOf(l)==-1) lineArray.push(l); } public function set imgUrl(urls:String):void { url=urls setLoader(); } public function get imgUrl():String { return url; } public function get cenPoint():Point { return centerPoint; } }}

 

Line.as

 

package component{import base.Base;import flash.display.Graphics;import flash.events.*;import flash.geom.Point;import mx.controls.Label;import mx.controls.TextArea;import mx.events.MoveEvent;public class Line extends Base{private var startPoint:Point=new Point();private var endPoint:Point=new Point();private var textArePoint:Point=new Point(); private var starCompoent:Component=new Component(0);private var endCompoent:Component=new Component(0);protected var processPoint:Array=new Array(); //中间过程点protected var oldPoint:Point=new Point(); //上一次最后移动的点protected var g:Graphics;private var startPaint:Boolean=false; private var rounds:Round;private var rounde:Round;//private var textAre:TextArea=new TextArea();//private var label:Label=new Label();public function Line(s:Point,e:Point){init();moveStartPoint(s.x,s.y);moveEndPoint(e.x,e.y);//configureListeners();this.addEventListener(MouseEvent.CLICK,onClick);this.addEventListener(MouseEvent.DOUBLE_CLICK,doubleClick);}private function init():void{ this.doubleClickEnabled=true; textAre.width=60; textAre.height=60; //label.x=startPoint.x; // label.y=startPoint.y; label.width=60; label.height=60;rounds=new Round(this);rounde=new Round(this);rounds.pointType=0;rounde.pointType=1; g=this.graphics;rounds.point=startPoint;rounde.point=endPoint;addChild(label);this.addChild(rounds);this.addChild(rounde);}//添加侦听 public function configureListeners():void { this.addEventListener(MouseEvent.MOUSE_DOWN,startD); this.addEventListener(MouseEvent.MOUSE_UP,stopD); this.addEventListener(MoveEvent.MOVE,moveDrag); }public function removeOwn():void{this.removeEventListener(MouseEvent.MOUSE_DOWN,startD); this.removeEventListener(MouseEvent.MOUSE_UP,stopD); this.removeEventListener(MoveEvent.MOVE,moveDrag);}public function configureChildListeners():void{rounds.addEventListener(MouseEvent.MOUSE_MOVE,dragOver); rounde.addEventListener(MouseEvent.MOUSE_MOVE,dragOver);}public function removeChildLine():void{rounds.removeEventListener(MouseEvent.MOUSE_MOVE,dragOver);rounde.removeEventListener(MouseEvent.MOUSE_MOVE,dragOver);}//画箭头 public function DrawArrowHead():void{switch (this.type){case 1: var p1:Point=new Point(); var p2:Point=new Point(); var lengthX:int=0; var lengthY:int=0; var lastProcessPoint:Point; if(processPoint.length>0) { lastProcessPoint=Point(processPoint[processPoint.length-1]); }else{ lastProcessPoint=startPoint; } if(lastProcessPoint.y==endPoint.y) { if(endPoint.x>startPoint.x) { lengthX=-7; lengthY=-7; p1=new Point(endPoint.x+lengthX,endPoint.y+lengthY); p2=new Point(endPoint.x+lengthX,endPoint.y-lengthY); }else{ lengthX=7; lengthY=7; p1=new Point(endPoint.x+lengthX,endPoint.y+lengthY); p2=new Point(endPoint.x+lengthX,endPoint.y-lengthY); } }else if(lastProcessPoint.x==endPoint.x) { if(endPoint.y>startPoint.y) { lengthX=7; lengthY=-7; p1=new Point(endPoint.x-lengthX,endPoint.y+lengthY); p2=new Point(endPoint.x+lengthX,endPoint.y+lengthY); }else{ lengthX=7; lengthY=7; p1=new Point(endPoint.x-lengthX,endPoint.y+lengthY); p2=new Point(endPoint.x+lengthX,endPoint.y+lengthY); } } with(g) { lineStyle(2,0x000000); moveTo(endPoint.x,endPoint.y); lineTo(p1.x, p1.y); moveTo(endPoint.x,endPoint.y); lineTo(p2.x, p2.y); } break; case 2:var startX:Number = startPoint.x; var startY:Number = startPoint.y; var endX:Number = endPoint.x; var endY:Number = endPoint.y; var arrowLength : Number = 10; var arrowAngle : Number = Math.PI / 5; var lineAngle : Number; if(endX - startX != 0) { lineAngle = Math.atan((endY - startY) / (endX - startX)); } else { if(endY - startY < 0) { lineAngle = Math.PI / 2; } else { lineAngle = 3 * Math.PI / 2; } } if(endY - startY >= 0 && endX - startX <= 0) { lineAngle = lineAngle + Math.PI; } else if(endY - startY <= 0 && endX - startX <= 0) { lineAngle = lineAngle + Math.PI; } //定义三角形 var angleC : Number = arrowAngle; var rimA : Number = arrowLength; var rimB : Number = Math.pow(Math.pow(endY - startY,2) + Math.pow(endX - startX,2),1/2); var rimC : Number = Math.pow(Math.pow(rimA,2) + Math.pow(rimB,2) - 2 * rimA * rimB * Math.cos(angleC),1/2); var angleA : Number = Math.acos((rimB - rimA * Math.cos(angleC)) / rimC); var leftArrowAngle : Number = lineAngle + angleA; var rightArrowAngle : Number = lineAngle - angleA; var leftArrowX : Number = startX + rimC * Math.cos(leftArrowAngle); var leftArrowY : Number = startY + rimC * Math.sin(leftArrowAngle); var rightArrowX : Number = startX + rimC * Math.cos(rightArrowAngle); var rightArrowY : Number = startY + rimC * Math.sin(rightArrowAngle); with(graphics) { moveTo(endPoint.x, endPoint.y); lineTo(leftArrowX, leftArrowY); moveTo(endPoint.x, endPoint.y); lineTo(rightArrowX, rightArrowY); } break;}}//画线条protected function paint():void{calculationTextPoint();g.clear();switch (this.type){case 0:break;// 经过中间点连接开始点和结束点case 1: if(this.selected) { g.lineStyle(8,0x0DD000); g.moveTo(startPoint.x,startPoint.y); for(var i:int=0;i<processPoint.length;i++) { g.lineTo(Point(processPoint[i]).x,Point(processPoint[i]).y); } g.lineTo(endPoint.x,endPoint.y); } g.lineStyle(2,0x000000); g.moveTo(startPoint.x,startPoint.y); for(var i:int=0;i<processPoint.length;i++) { g.lineTo(Point(processPoint[i]).x,Point(processPoint[i]).y); } g.lineTo(endPoint.x,endPoint.y); break;// 直接连接开始点和结束点case 2: if(this.selected) { g.lineStyle(8,0x0DD000); g.moveTo(startPoint.x,startPoint.y); g.lineTo(endPoint.x,endPoint.y); } g.lineStyle(2,0x000000); g.moveTo(startPoint.x,startPoint.y); g.lineTo(endPoint.x,endPoint.y); break;case 3:break;} DrawArrowHead();} override public function repaint():void { paint(); } private function startD(e:MouseEvent):void { e.currentTarget.startDrag();}private function stopD(e:MouseEvent):void{e.currentTarget.stopDrag();checkLock();}private function moveDrag(e:Event):void{}private function doubleClick(e:MouseEvent):void{addTextArea();} private function addTextArea():void { textAre.text=label.text; this.addChildAt(textAre,0); textAre.setFocus(); textAre.addEventListener(FocusEvent.FOCUS_OUT,rmoveTextArea); } private function rmoveTextArea(e:FocusEvent):void { label.text=textAre.text; textAre.removeEventListener(FocusEvent.FOCUS_OUT,rmoveTextArea); this.removeChild(textAre); }private function onClick(e:MouseEvent):void{if(!selected){ selected=true; container.selectComponent=this; this.repaint(); }}private function dragOver(e:Event):void{if(Round(e.currentTarget).Iid==rounds.Iid){moveStartPoint(e.currentTarget.x,e.currentTarget.y);}else if(Round(e.currentTarget).Iid==rounde.Iid){moveEndPoint(e.currentTarget.x,e.currentTarget.y);}}//移到开始点private function moveStartPoint(xx:int,yy:int):void{oldPoint=rounds.point;if(processPoint.length==0){processPoint.push(new Point());}if(oldPoint.y>yy){processPoint[processPoint.length-1].x=endPoint.x;processPoint[processPoint.length-1].y=yy;}else{processPoint[processPoint.length-1].y=endPoint.y;processPoint[processPoint.length-1].x=xx;}startPoint.x=xx;startPoint.y=yy;rounds.point=startPoint;g.clear(); repaint();}//移到结束点private function moveEndPoint(xx:int,yy:int):void{oldPoint=rounde.point;if(processPoint.length==0){processPoint.push(new Point());}if(oldPoint.y>yy){processPoint[processPoint.length-1].y=startPoint.y;processPoint[processPoint.length-1].x=xx;}else{processPoint[processPoint.length-1].x=startPoint.x;processPoint[processPoint.length-1].y=yy;}endPoint.x=xx;endPoint.y=yy;rounde.point=endPoint;g.clear(); repaint();}public function checkLock():void{if(starCompoent.type!=0){ if(starCompoent.accept(new Point(startPoint.x+x,startPoint.y+y))) { this.sPoint=starCompoent.cenPoint; repaint(); }else{ starCompoent.removeLine(this); rounds.configureListeners(); removeOwn(); starCompoent=new Component(0); configureChildListeners(); }}if(endCompoent.type!=0){if(endCompoent.accept(new Point(endPoint.x+x,endPoint.y+y))){}else{endCompoent.removeLine(this);rounde.configureListeners();removeOwn();endCompoent=new Component(0);configureChildListeners();}}}private function calculationTextPoint():void{var p:Point=new Point();switch (this.type){case 1:if(processPoint.length>0){//比较转折点和两端点的距离，在大的一边添加写字板if(Point.distance(Point(processPoint[0]),startPoint)>Point.distance(Point(processPoint[0]),endPoint)){ p.x=(startPoint.x+Point(processPoint[0]).x)/2-textAre.width/2; p.y=(startPoint.y+Point(processPoint[0]).y)/2-textAre.height/2;}else{ p.x=(endPoint.x+Point(processPoint[0]).x)/2-textAre.width/2; p.y=(endPoint.y+Point(processPoint[0]).y)/2-textAre.height/2;}}else{ p.x=(startPoint.x+endPoint.x)/2-textAre.width/2; p.y=(startPoint.y+endPoint.y)/2-textAre.height/2;}break;case 2: p.x=(startPoint.x+endPoint.x)/2-textAre.width/2; p.y=(startPoint.y+endPoint.y)/2-textAre.height/2;break;}this.textPoint=p;}public function updataEndComponent():void{moveEndPoint(endCompoent.cenPoint.x,endCompoent.cenPoint.y);}public function updataStartComponent():void{moveStartPoint(starCompoent.cenPoint.x,starCompoent.cenPoint.y);}public function set sPoint(p:Point):void{moveStartPoint(p.x,p.y);}public function get sPoint():Point{return startPoint;}public function set ePoint(p:Point):void{moveEndPoint(p.x,p.y);}public function get ePoint():Point{return endPoint;}public function set sCompoent(c:Component):void{starCompoent=c;moveStartPoint(starCompoent.cenPoint.x,starCompoent.cenPoint.y);}public function get sCompoent():Component{return starCompoent;}public function set eCompoent(c:Component):void{endCompoent=c;moveEndPoint(endCompoent.cenPoint.x,endCompoent.cenPoint.y);}public function get eCompoent():Component{return endCompoent;}public function get textPoint():Point{return textArePoint;}public function set textPoint(p:Point):void{this.textArePoint=p;textAre.x=textArePoint.x;textAre.y=textArePoint.y;label.x=textArePoint.x;label.y=textArePoint.y;}}}

 

项目还没完全做完，许多小的细节都要调整，画笔，生成xml，和peng图片的模块都没加上去！线条算法我想再重写下，这个算法不是很人性化!

 

项目演示地址:http://www.lvwlv.com/showModel/workPack.html