您的位置:首页 > 其它

今日

2013-08-16 18:14 627 查看
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, lineAngle.endPoint, btn);

                        

//                        lineList.push(lineAngle);

                        trace(lineList.length);

                        

//                        setLink(Butn[Butn.length-1], lineAngle, false);                            //设置对象的起终点

//                        setLink(btn, lineAngle, 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, 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 = 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,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 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;

        }

    }

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  flex4 Spark Sk