miércoles, 21 de mayo de 2014

ActionScript: Flecha que se estira (AS 3.0)

Autor: Francisco Arce
Correo: fj_arce@yahoo.com.mx


Esta basado en el algorito para una lineaque se estira. Aqui el chiste es dibujar la punta de la flecha y hacer que gire en el mismo ángulo que tenga la línea. Para obtener este ángulo, contamos con los puntos de la linea (el inicial y el final) y calculamos el arco tangente, el cual nos regresa el angulo en radianes. Los convertimos a grados y aplicamos la propiedad rotación. Acuerdate que los angulos en FLash estan desplazados 90 grados , por lo que ajustamos el mismo.

Como siempre se calcula la linea y la punta solo se rota, no hay distorsión. El código de la clase Flecha es el siguiente:

package {
   import flash.display.Sprite;
   import flash.events.MouseEvent;
   import flash.utils.Timer;
   import flash.events.TimerEvent;

   public class Flecha extends Sprite {
      var flecha:Sprite = new Sprite();
      var tiempo:Timer = new Timer(60,0);
      var contenedor:Sprite;
      var cuadro1:Sprite;
      var cuadro2:Sprite;
      var ancho:uint=10;
      var alto:uint=15;
      var x1:int=0;
      var y1:int=0;
      var x2:int=100;
      var y2:int=100;
      var color:uint=0;

      public function Flecha(xx,yy,lon,color):void {
      //Sujetador
      this.color=color;
      this.x1=xx;
      this.y1=yy;
      this.x2=xx+lon;
      this.y2=yy;
      //
      flecha.graphics.beginFill(0,.7);
      flecha.graphics.moveTo(-(ancho/2),-alto);
      flecha.graphics.lineTo(ancho/2,-alto);
      flecha.graphics.lineTo(0,0);
      flecha.graphics.lineTo(-(ancho/2),-alto);
      //
      addChild(flecha);
      flecha.x=x2;
      flecha.y=y2;
   //
   //Calcula segmentos
   var dx:Number=x1-x2;
   var dy:Number=y1-y2;

   //Determina el ángulo y lo convierte
   var radianes:Number=Math.atan2(dy,dx);
   var grados = 360*(radianes/(2*Math.PI));

   // point at cursor
   flecha.rotation=grados+90;
   //
   cuadro1=new Sprite ;
   cuadro1.graphics.beginFill(0xffffff);
   cuadro1.graphics.lineStyle(1,0,1);
   cuadro1.graphics.moveTo(0,0);
   cuadro1.graphics.lineTo(0,5);
   cuadro1.graphics.lineTo(5,5);
   cuadro1.graphics.lineTo(5,0);
   cuadro1.graphics.lineTo(0,0);
   //Sujetador 2
   cuadro2=new Sprite ;
   cuadro2.graphics.beginFill(0xffffff);
   cuadro2.graphics.lineStyle(1,0,1);
   cuadro2.graphics.moveTo(0,0);
   cuadro2.graphics.lineTo(0,5);
   cuadro2.graphics.lineTo(5,5);
   cuadro2.graphics.lineTo(5,0);
   cuadro2.graphics.lineTo(0,0);
   //
   contenedor=new Sprite ;
   contenedor.graphics.lineStyle(2,color,.7);
   contenedor.graphics.moveTo(x1,y1);
   contenedor.graphics.lineTo(x2,y2);
   //contenedor.x=xx;
   //contenedor.y=yy;
   addChild(contenedor);
   addChild(cuadro1);
   addChild(cuadro2);
   //
   cuadro1.x=x1-2.5;
   cuadro1.y=y1-2.5;
   cuadro2.x=x2-2.5;
   cuadro2.y=y2-2.5;
   //
   cuadro1.addEventListener(MouseEvent.MOUSE_DOWN, onMueveCuadro1);
   cuadro2.addEventListener(MouseEvent.MOUSE_DOWN, onMueveCuadro1);
   //
   cuadro1.addEventListener(MouseEvent.MOUSE_UP, onMueveCuadro2);
   cuadro2.addEventListener(MouseEvent.MOUSE_UP, onMueveCuadro2);
   }

   function onMueveCuadro1(e:MouseEvent):void {
      e.target.startDrag();
      tiempo.start()
      tiempo.addEventListener(TimerEvent.TIMER, onPintaLinea);
      //trace("inicio",e.target.name,e.target.x, e.target.y);
   }

   function onMueveCuadro2(e:MouseEvent):void {
      //trace("fin", e.target.name, e.target.x, e.target.y);
      e.target.stopDrag();
      tiempo.stop();
      pintaLinea();
   }

   function onPintaLinea(e:TimerEvent):void {
      pintaLinea();
   }

   function pintaLinea() {
      //
      //Calcula segmentos
      var dx:Number=cuadro1.x-cuadro2.x;
      var dy:Number=cuadro1.y-cuadro2.y;
      //
      //Determina el ángulo y lo convierte
      var radianes:Number=Math.atan2(dy,dx);
      var grados = 360*(radianes/(2*Math.PI));
      flecha.rotation=grados+90;
      flecha.x = cuadro2.x+2.5;
      flecha.y = cuadro2.y+2.5;
      //
      this.removeChild(contenedor);
      contenedor=new Sprite ;
      contenedor.graphics.lineStyle(2,color,1);
      contenedor.graphics.moveTo(cuadro1.x+2.5,cuadro1.y+2.5);
      contenedor.graphics.lineTo(cuadro2.x+2.5,cuadro2.y+2.5);
      addChild(contenedor);
      swapChildrenAt(3, 0);
   }
}
}

http://www.pacoarce.com

No hay comentarios:

Publicar un comentario