正在做的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