移动，连接线，折点

两点连接线

线条

package aline
{
    import flash.events.MouseEvent;
    import flash.geom.Point;
    
    import mx.core.UIComponent;
    
    public class Line extends UIComponent
        
    {
        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 = "线条";          //提示语
        
//---------------------------------------------------
        
        private const _EFFECT_RANGE:int = 3;
        private var _selectedNode:int = SELECTED_NONE_NODE;  
        
        public static const SELECTED_NONE_NODE:int=0;
        public static const SELECTED_FROM_NODE:int=1;
        public static const SELECTED_TO_NODE:int=2;
        
    //节点移动和拆断线条的
        public static const EVENT_LINE_NODE_MOVE:String = "EVENT_LINE_NODE_MOVE";
        public static const EVENT_LINE_BROKEN:String="EVENT_LINE_BROKEN";
        
//---------------------------------------------------
        
        public function Line()
        {
            super();
            this.mouseChildren=false;
            this._selectedNode = SELECTED_NONE_NODE;
    //折线事件
            this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
        }
        
//        -----------------------------------------------------------------------------------------------------
//        -----------------------------------------------------------------------------------------------------
        public function onMouseDown(event:MouseEvent):void{            //选取折点的点的坐标
            trace("line mouseDown");
            var eventType:String=EVENT_LINE_NODE_MOVE;
            this._selectedNode=SELECTED_NONE_NODE;
            var mousePoint:Point=new Point(event.localX, event.localY);
     //选中起始点放大放小
            if(isInRange(startPoint.x,startPoint.y,event.localX,event.localY)){
                trace("start big small");
                this._selectedNode=SELECTED_FROM_NODE;
    //选中终点放大放小            
            }else if(isInRange(endPoint.x,endPoint.y,event.localX,event.localY)){
                trace("end big small");
                this._selectedNode=SELECTED_TO_NODE;
            }else{
    //鼠标单击中间段        
                eventType=EVENT_LINE_BROKEN;
            }
            
            // 阻击冒泡，并派发自己的事件  
            event.stopPropagation();   
            var newEvent:MouseEvent = new MouseEvent(eventType, true);  
            newEvent.localX = event.stageX;      
            newEvent.localY = event.stageY;   
            dispatchEvent(newEvent);  
        }
        
    /*
        x,y起始或者终点坐标，testX，Y，当前鼠标移动到的坐标，effectRange,极坐标的有效半径，很重要的
     * */
        private function isInRange(x:Number,y:Number,testX:Number, testY:Number,effectRange:int=_EFFECT_RANGE):Boolean{
            return ((x-effectRange<=testX)&&(x + effectRange >= testX)  
                    && (y - effectRange <= testY) && (y + effectRange >= testY));
        }
        
//        -----------------------------------------------------------------------------------------------------
//        -----------------------------------------------------------------------------------------------------
        
        
        
        
        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.beginFill(lineColor,1);
                
                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);
                //this.graphics.endFill();
            }
        }
//得到线的角度
        private 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 function removeLine():void{
            this.graphics.clear();
        }
        
//------------------------------------------------------------------------------------------------
        public function draw2Line(pointX:int, pointY:int):void{             //还应该判断起始点，确定线段和箭头的
            this.graphics.clear();  
//            this.graphics.lineStyle(_lineStyle,_lineColor,1);   
            this.graphics.lineStyle(2,lineColor);   
            this.graphics.moveTo(startPoint.x, startPoint.y);  
            this.graphics.lineTo(pointX, pointY);  
            this.graphics.lineTo(endPoint.x,endPoint.y);  
        }
//------------------------------------------------------------------------------------------------
        
    }
}

应用程序

<?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"
               xmlns:ns="http://www.degrafa.com/2007"
               creationComplete="init()">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <!--1111  先画直角线
    2222  能够沿对角线进行伸缩
    -->
    <s:states>
        <s:State name="normal"/>
        <s:State name="rightAngle"/>
        <s:State name="rect"/>
        <s:State name="move"/>
    </s:states>
    
    <fx:Script>
        <![CDATA[
            
            import aline.Line;
            
            import mx.controls.ToolTip;
            import mx.core.IVisualElement;
            import mx.core.UIComponent;
            public var RightAngleFlag:Boolean=false;
            public var isDraw:Boolean=false;
            
            public var currentLineName:Line=null;
            
            protected function init():void
            {
                
    //折断和移动
                contain.addEventListener(Line.EVENT_LINE_BROKEN,onLineBroken);
                contain.addEventListener(Line.EVENT_LINE_NODE_MOVE,onLineNodeMove);
            }
//---------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------
            
            public function onLineBroken(event:MouseEvent):void{
                if(event.target is Line){
                    currentLineName=Line(event.target);
                    systemManager.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove4LB, true);   
                    systemManager.addEventListener(MouseEvent.MOUSE_UP, onMouseUp4LB, true);
                }
            }
            
            public function onMouseMove4LB(event:MouseEvent):void{
                event.stopImmediatePropagation();  
                if(currentLineName != null){  
                    currentLineName.draw2Line(event.localX, event.localY);  
                }  
            }
            
            public function onMouseUp4LB(event:MouseEvent):void{
                event.stopImmediatePropagation();  
                systemManager.removeEventListener(MouseEvent.MOUSE_MOVE, onMouseMove4LB, true);   
                systemManager.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp4LB, true );  
                
                var pointX:Number = event.localX;  
                var pointY:Number = event.localY;  
                var otherPoint:Point=new Point(event.localX,event.localY);
                
// 把线条拆分开,即新增加一条线来实现  
                if(currentLineName != null){  
                    var newLine:Line = new Line();  
                    newLine.lineColor=0xFF0000;
                    newLine.startPoint = currentLineName.startPoint;                  //访问的是空对象的 newLine没有startPoint吗？？？
                    newLine.startPoint = currentLineName.startPoint;  
                    newLine.endPoint=otherPoint;
//                    newLine.endPoint.x = pointX;  
//                    newLine.endPoint.y = pointY;  
                    newLine.drawLine();  
                    contain.addElement(newLine);  
                    
                    currentLineName.graphics.clear();  
                    currentLineName.startPoint=otherPoint;
//                    currentLineName.startPoint.x = pointX;  
//                    currentLineName.startPoint.y = pointY;  
                    currentLineName.drawLine();  
                    //mxCanvas.removeElement(currentLine);  
                }  
                currentLineName = null;  
            }
            
            public function onLineNodeMove(event:MouseEvent):void{
                
            }
            
//---------------------------------------------------------------------------------------
//---------------------------------------------------------------------------------------
            
            public var line:Line;
            public var drawLine:Boolean=false;                    //能否画线
            public var lineList:Array=new Array();
            public var currentLine:int=0;
            public var oldIndex:int;
            public function RightLineDown(event:MouseEvent):void{
                trace("down");
                
                if(isDraw && isDragNode(event)){
                    trace("local:"+event.localX+"stage:"+event.stageX+"target.x:"+event.target.x+"target.mouse:"+event.target.mouseX+
                        "currentX"+event.currentTarget.x+"current.MouseX"+event.currentTarget.mouseX);
                    line=new Line();
                    
                    line.lineColor=0xFF0000;
                    trace("++++++++"+event.target);
                    line.startPoint=new Point(event.stageX-contain.x,event.stageY-contain.y);
                    line.endPoint=new Point(event.stageX-contain.x,event.stageY-contain.y);
                    line.drawLine();
                    contain.addElement(line);
                    lineList[currentLine]=line;                         //确保有线条才能进去，和出来
                    drawLine=true;
                }
            }
            
            public function RightLineMove(event:MouseEvent):void{
                if(isDraw && drawLine && lineList.length >= currentLine ){
                    line.endPoint=new Point(event.stageX-contain.x,event.stageY-contain.y);
                    line.drawLine();
                }
            }
            public function RightLineUp(event:MouseEvent):void{                   //松开出现锚点？
                
//                this.parent.setChildIndex(this,oldIndex);//恢复图标所以的层次
                contain.setElementIndex(comp2,(contain.numElements-1));
                
                if(isDraw && drawLine){
                    trace(event.target);
                    if(isDragNode(event)){       //没设计到？？？？？？？？？？
                        trace("comp2");
                        var line:Line = lineList[currentLine] as Line;
                        //                        startMap.setLine(line,true);
                        //                        endMap.setLine(line,false);
                        currentLine++;
                        drawLine=false;
                    }else{
                        var lines:Line = lineList[currentLine] as Line;
                        if(lines != null){
                            lines.removeLine();
                            lineList.slice(currentLine,1);          //删除指定位置的对象
                            contain.removeElement(lines);
                        }
                    }
                }
            }
            
            public var tip:String="拖动画线";
            public function RightLineOver(event:MouseEvent):void{
                contain.toolTip=tip;
            }
            
            //-------------------------------------------------------------------------------------------------
            //访问子对象，判断容器内的子***************************************************   动态加载
            public function isDragNode(event:MouseEvent):Boolean{
                trace("子对象的个数："+contain.numElements);                     //有3个
                for(var i:int=0;i<contain.numElements;i++){
                    var child:Object=contain.getElementAt(i);
                    trace(contain.getElementAt(i)+",,")
                    if(child && child is Button){
//                                if(event.stageX > comp1.x && event.stageX < comp1.x+width && event.stageY > comp1.y && event.stageY < comp1.y+height
//                                ||event.stageX > comp2.x && event.stageX < comp2.x+width && event.stageY > comp2.y && event.stageY < comp2.y+height
//                                ||event.stageX > comp3.x && event.stageX < comp3.x+width && event.stageY > comp3.y && event.stageY < comp3.y+height){
//                                        return true;
////                                    }
                        trace("*****"+event.target+" ... "+event.currentTarget)       // 为line
                        if(event.target is Button){           //出现问题？？？难道是层次关系错了吗
                            return true;
                        }
                    }else{
                        return false;
                    }
                }
                return false;
            }
            //-------------------------------------------------------------------------------------------------------------
            //-------------------------------------------------------------------------------------------------------------
            protected function comp2_mouseDownHandler(event:MouseEvent):void
            {
                comp2.startDrag();
            }
            
            protected function comp2_mouseMoveHandler(event:MouseEvent):void
            {
                refreshLink();                                        //  更新线条指向,就是随着组件的移动而移动的
            }
            
            protected function comp2_mouseUpHandler(event:MouseEvent):void
            {
                comp2.stopDrag();
            }
            
            public function refreshLink():void{               
                
                var bx:Number=comp2.x+comp2.width/2;
                var by:Number=comp2.y+comp2.height/2;
                trace("线条数："+lineList.length)
                for(var i:int = 0; i < lineList.length; i++){
                    var line:Line = lineList[i];
                    line.startPoint=new Point(bx,by);
                    line.drawLine();
                }
                drawLine=false;
            }
//---------------------------------------------------------------------------------------------------
            
        ]]>
    </fx:Script>
    <s:Button id="drawLines" x="0" y="72" label="画直角线"
              click="isDraw=true;" click.move="this.currentState=''"/>
    <s:Button id="notDraw" x="0" y="156" label="取消画直角" click="drawLine=!drawLine;"/>
    <s:Button id="moves" label="移动" click="this.currentState='move';isDraw=false;"/>
    <s:BorderContainer id="contain" x="99" y="0" width="500" height="500">
        
        <!--移动的时候，线条跟着移动的实现，通过重绘来实现的-->
        
        <s:Button id="comp1" x="31" y="141" height="40" width="60" mouseDown="RightLineDown(event)" mouseMove="RightLineMove(event)"
                   mouseUp="RightLineUp(event)" mouseOver="RightLineOver(event)"/>
        <s:Button id="comp2" width="60" height="40" x="264" y="70" mouseDown.move="comp2_mouseDownHandler(event)"
                  mouseMove.move="comp2_mouseMoveHandler(event)" mouseUp.move="comp2_mouseUpHandler(event)" mouseDown="RightLineDown(event)" mouseMove="RightLineMove(event)"
                  mouseUp="RightLineUp(event)" mouseOver="RightLineOver(event)"/>
        <s:Button id="comp3" x="185" y="221" width="60" height="40" mouseDown="RightLineDown(event)" mouseMove="RightLineMove(event)"
                  mouseUp="RightLineUp(event)" mouseOver="RightLineOver(event)"/>
    </s:BorderContainer>

</s:Application>