ActionScript: Flecha que se estira (AS 3.0)
Autor: Francisco ArceCorreo: 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
