As3 带箭头直线的不同画法

由 夕空 撰写于  2013年4月1日

1 直接使用坐标画线,不用使用任何Math方法
  
  代码:

public function drawArrow():void {
            graphics.lineStyle(1,0,1);
            graphics.beginFill(0xffff00);
            graphics.moveTo(-50,-25);
            graphics.lineTo(0,-25);
            graphics.lineTo(0,-50);
            graphics.lineTo(50,0);
            graphics.lineTo(0,50);
            graphics.lineTo(0,25);
            graphics.lineTo(-50,25);
            graphics.lineTo(-50,-25);
            graphics.endFill();
  }


  说明:由于箭头的各个点的坐标和箭头的宽度都是事先确定好,可扩展性比较差,如果坐标点有任何改动的话,整个过程都要重新计算。
2 使用Math.cos、Math.sin组合画线
       
   代码:

//一般画带箭头直线
              function drawArrowWithVector(g:Graphics,x1:int,y1:int,x2:int,y2:int):void {
                     //箭头长度
                     var len:int = 10;
                     //箭头与直线的夹角
                     var _a:int = 30;
                     var angle:int = Math.atan2((y1-y2), (x1-x2))*(180/Math.PI);
                     //angle = Degree.fixAngle(angle);
                     g.lineStyle(lineWidth,0xff5566);
                     g.moveTo(x2,y2);
                     g.lineTo(x2+len*Math.cos((angle-_a)*(Math.PI/180)), y2+len*Math.sin((angle-_a)*(Math.PI/180)));
                     g.moveTo(x2,y2);
                     g.lineTo(x2+len*Math.cos((angle+_a)*(Math.PI/180)), y2+len*Math.sin((angle+_a)*(Math.PI/180)));
                     g.moveTo(x1,y1);
                     g.lineTo(x2,y2);   
              }


   说明:该方法比第一种方法的灵活性要好出很多,不管节点怎么变化都可以准确的画出你想要的内容。具体用法:

                     var sp:Sprite=new Sprite()
                     var v1:Point=new Point(100,200);
                     var v2:Point=new Point(350,150);
                     drawArrowWithVector(sp.graphics,v1.x,v1.y,v2.x,v2.y);
                     this.addChild(sp);



3 使用Point.polar和Point.offset方法画线
       
  代码:

       //使用极坐标画线
              private function drawArrowWithPolar(_g:Graphics,fP:Point,tP:Point):void{
                     var arrowBaseSize:Number = 10;//箭头两边距离中间线的距离
                     var arrowHeadLength:Number = 50;//箭头的长度

                     var lArrowBase:Point;
                     var rArrowBase:Point;
                     var mArrowBase:Point;

                     var edgeAngle:Number= Math.atan2(tP.y - fP.y,tP.x - fP.x);
                     mArrowBase = Point.polar(Point.distance(tP,fP) - arrowHeadLength,edgeAngle);
                     mArrowBase.offset(fP.x,fP.y);
                     lArrowBase = Point.polar(arrowBaseSize,(edgeAngle - (Math.PI / 2.0)));
                     rArrowBase = Point.polar(arrowBaseSize,(edgeAngle + (Math.PI / 2.0)));

                     lArrowBase.offset(mArrowBase.x,mArrowBase.y);                 
                     rArrowBase.offset(mArrowBase.x,mArrowBase.y);

                     /* now we actually draw */
                     //_g.beginFill(0xff5566);
                     _g.lineStyle(lineWidth,0xff5566);
                     _g.moveTo(fP.x, fP.y);
                     _g.lineTo(tP.x, tP.y);
                     _g.lineTo(lArrowBase.x, lArrowBase.y);
                     //_g.moveTo(tP.x,tP.y);
                     _g.lineTo(rArrowBase.x, rArrowBase.y);
                     _g.lineTo(tP.x, tP.y);
                     //_g.endFill();
              }
       使用方法:
              var sp:Sprite=new Sprite()
                     var v1:Point=new Point(100,200);
                     var v3:Point=new Point(100,200);
                     var v4:Point=new Point(350,350);
                     drawArrowWithPolar(sp.graphics,v3,v4);
                     this.addChild(sp);


       说明:个人觉得这个方法很有意思,有兴趣的朋友可以试着改变arrowBaseSize和arrowHeadLength的,看看具体的不同。

声明:星耀夕空|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - As3 带箭头直线的不同画法


欢迎光顾我的小站!