今日

sigleBordLine类

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
?? ??? ??? ??? xmlns:s="library://ns.adobe.com/flex/spark"
?? ??? ??? ??? xmlns:mx="library://ns.adobe.com/flex/mx"
?? ??? ??? ??? minWidth="955" minHeight="600"
?? ??? ??? ??? creationComplete="init()">
?? ?<fx:Declarations>
?? ??? ?<!-- 将非可视元素（例如服务、值对象）放在此处 -->
?? ?</fx:Declarations>
?? ?
?? ?<fx:Script>
?? ??? ?<![CDATA[
?? ??? ??? ?import aline.LineLag;
?? ??? ??? ?
?? ??? ??? ?import mx.controls.List;
?? ??? ??? ?
?? ??? ??? ?public var lineAngle:MyLineAngle;
?? ??? ??? ?public var selected:String = "lineConnect";
?? ??? ??? ?
?? ??? ??? ?public var Butn:Array = [];???????? ??? ??? ??? ?? //存储图形
?? ??? ??? ?
?? ??? ??? ?private var lineList:Array = [];???????????????? //存储线条
?? ??? ??? ?
?? ??? ??? ?public function init():void
?? ??? ??? ?{
?? ??? ??? ??? ?canvas.addEventListener(MouseEvent.MOUSE_DOWN,canvasDownHandle);
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?protected function canvasDownHandle(event:MouseEvent):void
?? ??? ??? ?{
?? ??? ??? ??? ?if(selected == "lineConnect")
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?if(event.target is Button)
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?var btn:Button = event.target as Button;
?? ??? ??? ??? ??? ??? ?Butn.push(btn);
?? ??? ??? ??? ??? ??? ?/**
?? ??? ??? ??? ??? ??? ? * 移动图像的时候，让线条也跟着一起移动的思路是：1.将画的线条存放起来,LineArr[];
?? ??? ??? ??? ??? ??? ? * */
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?lineAngle = new MyLineAngle();
?? ??? ??? ??? ??? ??? ?lineAngle.mouseEnabled = false;?????????????????????? //有子对象不受到影响，mouseChild子对象受到影响的
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?ui.addChild(lineAngle);
?? ??? ??? ??? ??? ??? ?canvas.addElement(ui);
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?lineAngle.startPoint = new Point(btn.x + btn.width/2,btn.y + btn.height/2);
?? ??? ??? ??? ??? ??? ?lineAngle.endPoint = new Point(event.stageX,event.stageY);
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?this.addEventListener(MouseEvent.MOUSE_MOVE,drawLineMoveHand);
?? ??? ??? ??? ??? ??? ?this.addEventListener(MouseEvent.MOUSE_UP,drawLineUpHand);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}else if(selected == "shapeMove")
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?if(event.target is Button)
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?this.addEventListener(MouseEvent.MOUSE_MOVE,shapeMoveHandle);
?? ??? ??? ??? ??? ??? ?this.addEventListener(MouseEvent.MOUSE_UP,shapeUpHandle);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?protected function drawLineMoveHand(event:MouseEvent):void
?? ??? ??? ?{
?? ??? ??? ??? ?
?? ??? ??? ??? ?lineAngle.endPoint = new Point(event.stageX,event.stageY);
?? ??? ??? ??? ?
?? ??? ??? ??? ?lineAngle.drawLine();
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?protected function drawLineUpHand(event:MouseEvent):void
?? ??? ??? ?{
?? ??? ??? ??? ?trace(event.target)
?? ??? ??? ??? ?
?? ??? ??? ??? ?var btn:Button = event.target as Button;
?? ??? ??? ??? ?
?? ??? ??? ??? ?if(event.target is Button)
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?if(btn.id != Butn[Butn.length-1].id)
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?lineAngle.startPoint = MyLineAngle.getStartLinkPoint(lineAngle.startPoint,lineAngle.endPoint,Butn[Butn.length-1]);
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?lineAngle.endPoint = new Point(btn.x + btn.width/2,btn.y + btn.height/2);
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?lineAngle.endPoint = MyLineAngle.getEndLinkPoint(lineAngle.startPoint,btn);
?? ??? ??? ??? ??? ??? ?
//?? ??? ??? ??? ??? ??? ?lineList.push(lineAngle);
?? ??? ??? ??? ??? ??? ?trace(lineList.length);
?? ??? ??? ??? ??? ??? ?
//?? ??? ??? ??? ??? ??? ?setLink(Butn[Butn.length-1],lineAngle,false);??????? ??? ??? ??? ? ??? ? //设置对象的起终点
//?? ??? ??? ??? ??? ??? ?setLink(btn,true);
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?lineAngle.drawLine();
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?}else
?? ??? ??? ??? ??? ?{
?? ??? ??? ??? ??? ??? ?lineAngle.removeLine();
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}else
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?lineAngle.removeLine();
?? ??? ??? ??? ?}
?? ??? ??? ??? ?
?? ??? ??? ??? ?this.removeEventListener(MouseEvent.MOUSE_MOVE,drawLineMoveHand);
?? ??? ??? ??? ?this.removeEventListener(MouseEvent.MOUSE_UP,drawLineUpHand);
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?private var num:int = 0;
?? ??? ??? ?
?? ??? ??? ?public function setLink(btn:Button,lineAngle:MyLineAngle,flag:Boolean):void
?? ??? ??? ?{
?? ??? ??? ??? ?var lineFlag:LineHeads = new LineHeads(lineAngle,flag);??????????? ??? ??? ??? ?? //线段和对应的端点
?? ??? ??? ??? ?
?? ??? ??? ??? ?lineList[num] = lineFlag;
?? ??? ??? ??? ?
?? ??? ??? ??? ?num++;
?? ??? ??? ??? ?
?? ??? ??? ??? ?trace(num);
?? ??? ??? ?}

?? ??? ??? ?protected function shapeMoveHandle(event:MouseEvent):void
?? ??? ??? ?{
?? ??? ??? ??? ?var btn:Button = event.target as Button;
?? ??? ??? ??? ?btn.startDrag();
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?protected function shapeUpHandle(event:MouseEvent):void
?? ??? ??? ?{
?? ??? ??? ??? ?var btn:Button = event.target as Button;
?? ??? ??? ??? ?btn.stopDrag();
?? ??? ??? ??? ?
?? ??? ??? ??? ?refreshLink();
?? ??? ??? ??? ?
?? ??? ??? ??? ?this.removeEventListener(MouseEvent.MOUSE_MOVE,shapeMoveHandle);
?? ??? ??? ??? ?this.removeEventListener(MouseEvent.MOUSE_UP,shapeUpHandle);
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ??? ?protected function refreshLink():void
?? ??? ??? ?{
?? ??? ??? ??? ?
?? ??? ??? ??? ?for (var i:int = 0; i < lineList.length; i++)
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?var lineFlag:LineHeads = lineList[i];
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var line:MyLineAngle = lineFlag.myLine;
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?var isHead:Boolean = lineFlag.isHead;
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?/**
?? ??? ??? ??? ??? ? * 如果是连线箭头所指的，则重设线条开始位置
?? ??? ??? ??? ??? ? * 如果不是，则重设连线结束
?? ??? ??? ??? ??? ? **/
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if(isHead){
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?line.endPoint = line.endPoint;
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?trace(line.endPoint);
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?line.startPoint = line.startPoint;
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?trace(line.startPoint);
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?line.drawLine();
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?]]>
?? ?</fx:Script>
?? ?
?? ?<mx:UIComponent id="ui" mouseEnabled="false"/>
?? ?
?? ?<s:BorderContainer id="canvas" width="500" height="500">
?? ??? ?
?? ??? ?<s:Button id="comp1" x="181" y="203" width="91" height="91" label="comp1"/>
?? ??? ?<s:Button id="comp2" x="46" y="99" width="91" height="91" label="comp2"/>
?? ??? ?<s:Button id="comp3" x="348" y="284" width="91" height="91" label="comp3"/>
?? ??? ?<s:Button id="comp4" x="261" y="79" width="91" height="91" label="comp4"/>
?? ??? ?<s:Button id="comp5" x="83" y="326" width="91" height="91" label="comp5"/>
?? ??? ?<s:Button id="lineConnect" x="29" y="12" label="lineConnect" click="selected = 'lineConnect'"/>
?? ??? ?<s:Button id="shapeMove" x="163" y="12" label="shapeMove" click="selected = 'shapeMove'"/>
?? ??? ?
?? ?</s:BorderContainer>
</s:Application>

?

?

?

package aaRight.z.test { ?? ?import aaRight.util.RectHandle; ?? ? ?? ?import com.roguedevelopment.objecthandles.example.SimpleSpriteShape; ?? ? ?? ?import flash.display.Sprite; ?? ?import flash.events.Event; ?? ?import flash.events.MouseEvent; ?? ?import flash.geom.Point; ?? ? ?? ?import maodian.BrokenLineRect; ?? ? ?? ?import mx.core.UIComponent; ?? ?import mx.managers.ToolTipManager; ?? ? ?? ?import spark.components.Button; ?? ? ?? ?public class MyLineAngle extends Sprite ?? ??? ? ?? ?{ ?? ??? ?public var startPoint:Point;???????? ??? ??? ? //起始节点 ?? ??? ?public var endPoint:Point;??????????? ??? ?//结束节点、 ?? ??? ?public var isArrow:Boolean = true;???? ??? ? //是否有箭头 ?? ??? ?public var arrowSize:uint = 6;???????? ??? ?//箭头大小 ?? ??? ?public var lineColor:uint = 0x000000;?????? //颜色 ?? ??? ?public var tip:String = "线条";??????? ??? ? //提示语 ?? ??? ? ?? ??? ?public var isHead:Boolean;?? ??? ??? ??? ??? ?//是否是箭头,移动的时候用到的 ?? ??? ? ?? ??? ?public function MyLineAngle() ?? ??? ?{ ?? ??? ??? ?super(); ?? ??? ?} ?? ??? ? ?? ??? ?public function drawLine():void ?? ??? ?{?????????????? ? ?? ??? ??? ?//************还要扩展，扩展成能够拉的折线的，参考UXine********** ?? ??? ??? ?this.graphics.clear(); ?? ??? ??? ?this.graphics.lineStyle(2,lineColor); ?? ??? ??? ?this.graphics.moveTo(startPoint.x,startPoint.y); ?? ??? ??? ?this.graphics.lineTo(endPoint.x,endPoint.y); //?? ??? ??? ?this.toolTip = tip; ?? ??? ??? ? ?? ??? ??? ?//-----画箭头------ ?? ??? ??? ?if(isArrow) ?? ??? ??? ?{ ?? ??? ??? ??? ?var angle:Number? = this.getAngle(); ?? ??? ??? ??? ?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); ?? ??? ??? ?} ?? ??? ?} ?? ??? ? ?? ??? ?//得到线的角度 ?? ??? ?public function getAngle():Number ?? ??? ?{ ?? ??? ??? ?var temX:Number = endPoint.x - startPoint.x; ?? ??? ??? ?var temY:Number = startPoint.y - endPoint.y; ?? ??? ??? ?var angle:Number = Math.atan2(temY,temX) * (180/Math.PI) ?? ??? ??? ?return angle; ?? ??? ?} ?? ??? ? ?? ??? ?//联系节点与鼠标坐标，并获得交叉点 ?? ??? ?public static function getStartLinkPoint(fromPoint:Point,targetPoint:Point,acrossNode:Button):Point{ ?? ??? ??? ?/** ?? ??? ??? ? *? 需要说明的是，BaseNode是用在canvans中间的，flex4中间用BasicLayout加上组件来进行的 ?? ??? ??? ? */ ?? ??? ??? ?var angle:Number = getAngle(fromPoint,targetPoint); ?? ??? ??? ? ?? ??? ??? ?var distanceX:Number = Math.abs(( acrossNode.width/2 )*( targetPoint.x-fromPoint.x )/(targetPoint.y-fromPoint.y)); ?? ??? ??? ?var distanceY:Number = Math.abs(( acrossNode.width/2 )*( targetPoint.y-fromPoint.y )/(targetPoint.x-fromPoint.x)); ?? ??? ??? ? ?? ??? ??? ?if(targetPoint.x < fromPoint.x) ?? ??? ??? ?{ ?? ??? ??? ??? ?distanceX= -distanceX; ?? ??? ??? ?} ?? ??? ??? ?if(targetPoint.y < fromPoint.y) ?? ??? ??? ?{ ?? ??? ??? ??? ?distanceY = -distanceY; ?? ??? ??? ?} ?? ??? ??? ? ?? ??? ??? ?//最终的x,y坐标的 ?? ??? ??? ?var x:Number = 0; ?? ??? ??? ?var y:Number = 0 ?? ??? ??? ? ?? ??? ??? ?if(angle >= 45 && angle < 135)?????????????? //应该是八种情况来处理的 ?? ??? ??? ?{ ?? ??? ??? ??? ?x = fromPoint.x + distanceX; ?? ??? ??? ??? ?y = acrossNode.y; ?? ??? ??? ??? ? ?? ??? ??? ?}else if(angle >= 135 && angle <225) ?? ??? ??? ?{ ?? ??? ??? ??? ?x = acrossNode.x; ?? ??? ??? ??? ?y = fromPoint.y + distanceY; ?? ??? ??? ??? ? ?? ??? ??? ?}else if(angle >= 225&&angle <= 315) ?? ??? ??? ?{ ?? ??? ??? ??? ?x = fromPoint.x + distanceX; ?? ??? ??? ??? ?y = fromPoint.y + acrossNode.height/2; ?? ??? ??? ??? ? ?? ??? ??? ?}else ?? ??? ??? ?{ ?? ??? ??? ??? ?x = fromPoint.x + acrossNode.width/2; ?? ??? ??? ??? ?y = fromPoint.y + distanceY; ?? ??? ??? ?} ?? ??? ??? ?return new Point(x,y); ?? ??? ?} ?? ??? ? ?? ??? ?public static function getAngle(fromPoint:Point,targetPoint:Point):Number{ ?? ??? ??? ? ?? ??? ??? ?/**为了与三角坐标一致，y坐标的值要反过来？？？？？？怎么反*/ ?? ??? ??? ? ?? ??? ??? ?var radian:Number=Math.abs(Math.atan((targetPoint.x-fromPoint.x)/(targetPoint.y-fromPoint.y))); ?? ??? ??? ? ?? ??? ??? ?var angle:Number = radian*180/Math.PI; ?? ??? ??? ? ?? ??? ??? ?if((targetPoint.x >= fromPoint.x) && (targetPoint.y <= fromPoint.y))????????? //0~90区域 ?? ??? ??? ?{ ?? ??? ??? ??? ?angle = 90 - angle; ?? ??? ??? ?} ?? ??? ??? ?else if((targetPoint.x <= fromPoint.x) && (targetPoint.y <= fromPoint.y))??? //90~180区域 ?? ??? ??? ?{ ?? ??? ??? ??? ?angle = 90 + angle; ?? ??? ??? ?} ?? ??? ??? ?else if((targetPoint.x <= fromPoint.x) && (targetPoint.y >= fromPoint.y))???? //180~270区域 ?? ??? ??? ?{ ?? ??? ??? ??? ?angle = 270 - angle; ?? ??? ??? ?} ?? ??? ??? ?else if((targetPoint.x >= fromPoint.x) && (targetPoint.y >= fromPoint.y))???? //270~360区域 ?? ??? ??? ?{ ?? ??? ??? ??? ?angle = 270 + angle; ?? ??? ??? ?} ?? ??? ??? ?return angle; ? ?? ??? ?} ?? ??? ? ?? ??? ?public static function getEndLinkPoint(fromPoint:Point,y坐标的 ?? ??? ??? ?var x:Number = 0; ?? ??? ??? ?var y:Number = 0 ?? ??? ??? ? ?? ??? ??? ?if(angle >= 45 && angle < 135) ?? ??? ??? ?{ ?? ??? ??? ??? ?x = targetPoint.x - distanceX; ?? ??? ??? ??? ?y = targetPoint.y + acrossNode.height/2; ?? ??? ??? ??? ? ?? ??? ??? ?}else if(angle >= 135 && angle <225) ?? ??? ??? ?{ ?? ??? ??? ??? ?x = targetPoint.x + acrossNode.width/2; ?? ??? ??? ??? ?y = targetPoint.y + distanceY; ?? ??? ??? ??? ? ?? ??? ??? ?}else if(angle >= 225&&angle <= 315) ?? ??? ??? ?{ ?? ??? ??? ??? ?x = targetPoint.x + distanceX; ?? ??? ??? ??? ?y = targetPoint.y - acrossNode.height/2; ?? ??? ??? ??? ? ?? ??? ??? ?}else ?? ??? ??? ?{ ?? ??? ??? ??? ?x = targetPoint.x - acrossNode.width/2; ?? ??? ??? ??? ?y = targetPoint.y - distanceY; ?? ??? ??? ?} ?? ??? ??? ?return new Point(x,y); ?? ??? ?} ?? ??? ? ?? ??? ?public function removeLine():void ?? ??? ?{ ?? ??? ??? ?this.graphics.clear(); ?? ??? ?} ?? ??? ? ?? ??? ?//-----------------------------------------------------------------------------------------------------------------???? ? ?? ??? ? ?? ??? ?/** 直角线的画出来 ?? ??? ? * */? ? ?? ??? ? ?? ??? ?public var XPoint:Point = new Point(); ?? ??? ? ?? ??? ?public function draw2Line(pointX:int,pointY:int):void ?? ??? ?{?????????? ? ?? ??? ??? ?//还应该判断起始点，确定线段和箭头的 ?? ??? ??? ? ?? ??? ??? ?XPoint.x = pointX; ?? ??? ??? ?XPoint.y = pointY; ?? ??? ??? ? ?? ??? ??? ?this.graphics.clear(); ?? ??? ??? ?this.graphics.lineStyle(2,lineColor); ? ?? ??? ??? ? ?? ??? ??? ?this.graphics.moveTo(startPoint.x,startPoint.y); ?? ??? ??? ?this.graphics.lineTo(pointX,pointY); ?? ??? ??? ?this.graphics.moveTo(pointX,pointY); ?? ??? ??? ?this.graphics.lineTo(endPoint.x,endPoint.y); ?? ??? ??? ? //?? ??? ??? ?this.toolTip = tip; ?? ??? ??? ? ?? ??? ??? ? ?? ??? ??? ?if(isArrow){ ?? ??? ??? ??? ? ?? ??? ??? ??? ?var angle:Number? = this.get2Angle(pointX,pointY); ?? ??? ??? ??? ?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,endPoint.y); ?? ??? ??? ?} ?? ??? ?} ?? ??? ?//控制中间点与终点的角度来计算角度 ?? ??? ?public function get2Angle(pointX:Number,pointY:Number):Number ?? ??? ?{ ?? ??? ??? ?var temX:Number = endPoint.x - pointX; ?? ??? ??? ?var temY:Number = pointY - endPoint.y; ?? ??? ??? ?var angle:Number = Math.atan2(temY,temX) * (180/Math.PI); ?? ??? ??? ?return angle; ?? ??? ?} ?? ?} }