flex 画带箭头的线型的方法

FLEX 画图时并没有直接画带箭头线性的方法。

那怎么画带箭头的线呢？

分两步：

1.画一条线，这个很简单。

2.画箭头，这步比较麻烦，因为画箭头的时候，线需要旋转，箭头也需要跟着旋转，这样就需要动态的计算坐标。

下面是我实现的代码。

 

package customer
{
    import flash.geom.Point;
    
    import mx.core.UIComponent;

    public class MyTriangle extends UIComponent
    {
        public function MyTriangle()
        {
            super();
        }
        
        //箭头的大小
        public var Radius:int=6;
        public var FromPoint:Point;
        public var ToPoint:Point;
        //线性的颜色
        public var LineColor:uint=0x000000;
        //是否需要画箭头
        public var NeedArrow:Boolean=true;
        
        private function GetAngle():int
        {
            var  tmpx:int=ToPoint.x-FromPoint.x ;
            var tmpy:int=FromPoint.y -ToPoint.y ;
            var angle:int= Math.atan2(tmpy,tmpx)*(180/Math.PI);
            return angle;
        }
        
        //绘制线
        public function Draw():void
        {
            this.graphics.clear();
            this.graphics.lineStyle(1,LineColor,1);
            this.graphics.moveTo(FromPoint.x,FromPoint.y);
            this.graphics.lineTo(ToPoint.x,ToPoint.y);
            
            if(NeedArrow)
            {
                var angle:int =GetAngle();
                var centerX:int=ToPoint.x-Radius * Math.cos(angle *(Math.PI/180)) ;
                var centerY:int=ToPoint.y+Radius * Math.sin(angle *(Math.PI/180)) ;
                var topX:int=ToPoint.x ;
                var topY:int=ToPoint.y  ;
                
                var leftX:int=centerX + Radius * Math.cos((angle +120) *(Math.PI/180))  ;
                var leftY:int=centerY - Radius * Math.sin((angle +120) *(Math.PI/180))  ;
                
                var rightX:int=centerX + Radius * Math.cos((angle +240) *(Math.PI/180))  ;
                var rightY:int=centerY - Radius * Math.sin((angle +240) *(Math.PI/180))  ;
                
                this.graphics.beginFill(LineColor,1);
                
                this.graphics.lineStyle(1,LineColor,1);
                
                this.graphics.moveTo(topX,topY);
                this.graphics.lineTo(leftX,leftY);
                
                this.graphics.lineTo(centerX,centerY);
                
                this.graphics.lineTo(rightX,rightY);
                this.graphics.lineTo(topX,topY);
                
                this.graphics.endFill();
            }
        }
        
    
    }
}

 

测试代码：

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"  layout="absolute" creationComplete="init();" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FCFCFC, #FCFCFC]">
    <mx:Script>
        <![CDATA[
            
            import mx.controls.Alert;
            import customer.MyTriangle;
            
            var begin:Boolean=false;
            var tmp:MyTriangle;
            var fromPoint:Point;
            
            
            private function mouseDownHandler(e:MouseEvent) : void
            {
                begin=true;
                fromPoint=new Point(mouseX,mouseY);
                tmp=new MyTriangle();
                tmp.Radius=4;
                tmp.NeedArrow=true;
                myCanvas.addChild(tmp);
            }
            
            private function mouseMoveHandler(e:MouseEvent):void
            {
                if(begin)
                {
                    var toPoint:Point=new Point(mouseX,mouseY);
                    tmp.fromPoint=fromPoint;
                    tmp.toPoint=toPoint;
                    tmp.Draw();
                }    
            }
            
            private function mouseOverHandler(e:MouseEvent):void
            {
                begin=false;
            }
    
            
        ]]>
    </mx:Script>
    <mx:Canvas x="0" y="0" width="100%" id="myCanvas" height="100%"  mouseUp="mouseOverHandler(event)" mouseDown="mouseDownHandler(event)" mouseMove="mouseMoveHandler(event);">
    </mx:Canvas>
        
</mx:Application>