Flex中画箭头

  第一种

    参考图片

代码：

 

[html] view plaincopy

1. /**  
2.    * 画箭头   
3.    * ---▲  
4.    * @param start  开始节点  
5.    * @param end    结束节点  
6.    * @param color  线条颜色  
7.    * @param alpha  透明度  
8.    * @param radius  箭头的大小  
9.    *   
10.    */  
11.   public function drawArrow(start:Point,end:Point,color:uint=0x000000,alpha:Number=1,radius:Number=8.5):void{  
12.    var z:Number=Math.sqrt((end.x - start.x) * (end.x - start.x) + (end.y - start.y) * (end.y - start.y));  
13.    var angle:Number=Math.atan2(end.y - start.y, end.x - start.x);  
14.    var exAngle:Number=Math.PI * 4.8 / 4;  
15.    var p1:Point=Point.polar(z, angle);  
16.    var p2:Point=Point.polar(radius, angle + exAngle);  
17.    var p3:Point=Point.polar(radius, angle - exAngle);  
18.    p1.offset(start.x, start.y);  
19.    p2.offset(p1.x, p1.y);  
20.    p3.offset(p1.x, p1.y);  
21.    if(alpha>1) alpha=1;  
22.    else if(alpha<0) alpha=0;  
23.    arrow.graphics.beginFill(color,alpha);  
24.    arrow.graphics.moveTo(p1.x, p1.y);  
25.    arrow.graphics.lineTo(p2.x, p2.y);  
26.    arrow.graphics.lineTo(p3.x, p3.y);  
27.    arrow.graphics.lineTo(p1.x, p1.y);  
28.    arrow.graphics.endFill();  
29.    this.addChild(arrow);  
30.   }  

   

   第二种   

     参考图片

    

代码：

[html] view plaincopy

1. /**  
2.    *  画箭头方法  
3.    *     
4.    *  →  
5.    * @param x1  开始节点x轴坐标  
6.    * @param y1  开始节点y轴坐标  
7.    * @param x2  结束节点x轴坐标  
8.    * @param y2  结束节点y轴坐标  
9.    * @param lineThickness 线条的粗细  
10.    * @param color  线条的颜色  
11.    * @param alpha  透明度  
12.    *   
13.    */   
14.   public function performArrowDrawing(x1:Number, y1:Number, x2:Number, y2:Number, lineThickness:Number, color:Number, alpha:Number):void{  
15.    arrow.graphics.lineStyle(lineThickness, color, alpha);  
16.    var arrowHeight:Number = 15;  
17.    var arrowWidth:Number = 10;  
18.    var angle:Number = Math.atan2(y2-y1, x2-x1);  
19.    arrow.graphics.moveTo(x2-arrowHeight*Math.cos(angle)-arrowWidth*Math.sin(angle),  
20.     y2-arrowHeight*Math.sin(angle)+arrowWidth*Math.cos(angle));  
21.    arrow.graphics.lineTo(x2, y2);  
22.    arrow.graphics.lineTo(x2-arrowHeight*Math.cos(angle)+arrowWidth*Math.sin(angle),   
23.     y2-arrowHeight*Math.sin(angle)-arrowWidth*Math.cos(angle));   
24.   }  

 

 第三种

       参考图片

    代码：

 

[html] view plaincopy

1. /**  
2.    *   
3.    * @param startX  
4.    * @param startY  
5.    * @param endX  
6.    * @param endY  
7.    * @return   
8.    *   
9.    */private function GetAngle(startX:Number,startY:Number,endX:Number,endY:Number):int  
10.         {  
11.             var tmpx:int=endX-startX ;  
12.             var tmpy:int=startY -endY ;  
13.             var angle:int= Math.atan2(tmpy,tmpx)*(180/Math.PI);  
14.             return angle;  

[html] view plaincopy

1.   /**  
2.     *   
3.     * @param startX 开始节点x轴坐标  
4.     * @param startY 开始节点y轴坐标  
5.     * @param endX   结束节点x轴坐标  
6.     * @param endY   结束节点y轴坐标  
7.     * @param Radius 箭头的大小  
8.     *   
9.     */ public  function drawArrowCenter(startX:Number,startY:Number,endX:Number,endY:Number,Radius:Number):void {  
10.              var angle:int= GetAngle(startX,startY,endX,endY);  
11.              var centerX:int=endX-Radius * Math.cos(angle *(Math.PI/180)) ;  
12.              var centerY:int=endY+Radius * Math.sin(angle *(Math.PI/180)) ;  
13.              var topX:int=endX ;  
14.              var topY:int=endY  ;  
15.              var LineColor:uint=0x8699A5;  
16.              var leftX:int=centerX + Radius * Math.cos((angle +120) *(Math.PI/180))  ;  
17.              var leftY:int=centerY - Radius * Math.sin((angle +120) *(Math.PI/180))  ;  
18.                
19.              var rightX:int=centerX + Radius * Math.cos((angle +240) *(Math.PI/180))  ;  
20.              var rightY:int=centerY - Radius * Math.sin((angle +240) *(Math.PI/180))  ;  
21.                
22.              arrow.graphics.beginFill(LineColor,1);  
23.                
24.              arrow.graphics.lineStyle(1,LineColor,1);  
25.                
26.              arrow.graphics.moveTo(topX,topY);  
27.              arrow.graphics.lineTo(leftX,leftY);  
28.                
29.              arrow.graphics.lineTo(centerX,centerY);  
30.                
31.              arrow.graphics.lineTo(rightX,rightY);  
32.              arrow.graphics.lineTo(topX,topY);  
33.              arrow.graphics.endFill();  
34.   
35.          }  

其中第三种算法有点问题，箭头不对称，需要修改。希望高手指导。在此先感谢了

忘记加上

[html] view plaincopy

1. public var arrow:UIComponent=new UIComponent();