Flex中画箭头

第一种

参考图片

代码：

[html] view plain copy

1. /**
2. *画箭头
3. *---▲
4. *@paramstart开始节点
5. *@paramend结束节点
6. *@paramcolor线条颜色
7. *@paramalpha透明度
8. *@paramradius箭头的大小
9. *
10. */
11. publicfunctiondrawArrow(start:Point,end:Point,color:uint=0x000000,alpha:Number=1,radius:Number=8.5):void{
12. varz:Number=Math.sqrt((end.x-start.x)*(end.x-start.x)+(end.y-start.y)*(end.y-start.y));
13. varangle:Number=Math.atan2(end.y-start.y,end.x-start.x);
14. varexAngle:Number=Math.PI*4.8/4;
15. varp1:Point=Point.polar(z,angle);
16. varp2:Point=Point.polar(radius,angle+exAngle);
17. varp3: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. elseif(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 plain copy

1. /**
2. *画箭头方法
3. *
4. *→
5. *@paramx1开始节点x轴坐标
6. *@paramy1开始节点y轴坐标
7. *@paramx2结束节点x轴坐标
8. *@paramy2结束节点y轴坐标
9. *@paramlineThickness线条的粗细
10. *@paramcolor线条的颜色
11. *@paramalpha透明度
12. *
13. */
14. publicfunctionperformArrowDrawing(x1:Number,y1:Number,x2:Number,y2:Number,lineThickness:Number,color:Number,alpha:Number):void{
15. arrow.graphics.lineStyle(lineThickness,color,alpha);
16. vararrowHeight:Number=15;
17. vararrowWidth:Number=10;
18. varangle: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 plain copy

1. /**
2. *
3. *@paramstartX
4. *@paramstartY
5. *@paramendX
6. *@paramendY
7. *@return
8. *
9. */privatefunctionGetAngle(startX:Number,startY:Number,endX:Number,endY:Number):int
10. {
11. vartmpx:int=endX-startX;
12. vartmpy:int=startY-endY;
13. varangle:int=Math.atan2(tmpy,tmpx)*(180/Math.PI);
14. returnangle;

[html] view plain copy

1. /**
2. *
3. *@paramstartX开始节点x轴坐标
4. *@paramstartY开始节点y轴坐标
5. *@paramendX结束节点x轴坐标
6. *@paramendY结束节点y轴坐标
7. *@paramRadius箭头的大小
8. *
9. */publicfunctiondrawArrowCenter(startX:Number,startY:Number,endX:Number,endY:Number,Radius:Number):void{
10. varangle:int=GetAngle(startX,startY,endX,endY);
11. varcenterX:int=endX-Radius*Math.cos(angle*(Math.PI/180));
12. varcenterY:int=endY+Radius*Math.sin(angle*(Math.PI/180));
13. vartopX:int=endX;
14. vartopY:int=endY;
15. varLineColor:uint=0x8699A5;
16. varleftX:int=centerX+Radius*Math.cos((angle+120)*(Math.PI/180));
17. varleftY:int=centerY-Radius*Math.sin((angle+120)*(Math.PI/180));
19. varrightX:int=centerX+Radius*Math.cos((angle+240)*(Math.PI/180));
20. varrightY:int=centerY-Radius*Math.sin((angle+240)*(Math.PI/180));
22. arrow.graphics.beginFill(LineColor,1);
24. arrow.graphics.lineStyle(1,LineColor,1);
26. arrow.graphics.moveTo(topX,topY);
27. arrow.graphics.lineTo(leftX,leftY);
29. arrow.graphics.lineTo(centerX,centerY);
31. arrow.graphics.lineTo(rightX,rightY);
32. arrow.graphics.lineTo(topX,topY);
33. arrow.graphics.endFill();
35. }

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

忘记加上

[html] view plain copy

1. publicvararrow:UIComponent=newUIComponent();