Coordenadas de un rectángulo

[Silver]

Hola amigos,

Esta duda es más geométrica que de programación, pero ahí les va.
Usando AS3 y la clase Graphics estamos dibujando pequeños rectángulos alergados simulando calles de un juego.
Los datos que se tienen son las coordenadas de inicio del rectángulo (xStart, yStart) y las coordenadas finales (xEnd, yEnd)... si el rectángulo es horizontal o vertical no hay problemas pues se le resta o suma a las coordenadas iniciales... pero cuando el rectángulo es inclinado (puede ser con cualquier grado de inclinación) entonces se necesita uan formulita para calcular las nuevas coordenadas y que el restángulo se vea simétrico.



Alguna sugerencia????

Saludos!!

[Lynxcraft]

mételas dentro de un contenedor

Código PHP:

  var ancho:Number=200 
var alto:Number=100 
var sprite:Shape= new Shape(); 
sprite.graphics.beginFill(0x000000); 
sprite.graphics.drawRect(-(ancho/2), -(alto/2), ancho, alto); 
sprite.graphics.endFill(); 
 
var contenedor:Sprite=new Sprite() 
contenedor.addChild(sprite) 
contenedor.rotation=10 
contenedor.x=100 
contenedor.y=100 
addChild(contenedor) 
addEventListener(Event.ENTER_FRAME, rota) 
function rota(event:Event):void{ 
    contenedor.rotation+=1 
}  
   

ejemplo 2

Código PHP:

  var ancho:Number=200 
var alto:Number=100 
var sprite:Shape= new Shape(); 
sprite.graphics.beginFill(0x000000); 
sprite.graphics.drawRect(0, 0, ancho, alto); 
sprite.graphics.endFill(); 
sprite.x=-(ancho/2) 
sprite.y=-(alto/2) 
 
var contenedor:Sprite=new Sprite() 
contenedor.addChild(sprite) 
contenedor.rotation=10 
contenedor.x=100 
contenedor.y=100 
addChild(contenedor) 
addEventListener(Event.ENTER_FRAME, rota) 
function rota(event:Event):void{ 
    contenedor.rotation+=1 
}  
   

y sin usar contenedor

Código PHP:

  var ancho:Number=200 
var alto:Number=100 
var sprite:Sprite= new Sprite(); 
sprite.graphics.beginFill(0x000000); 
sprite.graphics.drawRect(-(ancho/2), -(alto/2), ancho, alto); 
sprite.graphics.endFill(); 
sprite.x=100 
sprite.y=100 
addChild(sprite) 
 
addEventListener(Event.ENTER_FRAME, rota) 
function rota(event:Event):void{ 
    sprite.rotation+=1 
}  
   

[Silver]

Gracias LynxCraft,

Pero el problema no es dibujar un rectángulo, sino determinar las coordenadas correctas para el dibujo del mismo tomando como base un punto de inicio y otro final... ojo: es muy diferente un rectángulo horizontal a uno con inclinación, se necesita una ecuación lineal.

En kirupa.com recibí la siguiente respuesta, pero la verdad, no entendí como hacerlo.

it's standard linear equation...

a line (with no end points) is defined as a point with a slope

two lines that are parallel have the same slope but pass through different points

the if you know two points on a line, you can easily deduce the slope as the delta in each dimension... or in 2d as the ratio of rise to run

Some other things that may be useful:

slope can be defined as a vector... < i, j> where i is the dt of x, and j is the dt of y.

to rotate a vector 90 degrees in 2d, you just swap i and j, and set either i or j negative.

multiplying a scalar (number) by a vector is performed piecewise... C<i,j> == <ci, cj>

adding two vectors is performed piecewise... <i1,j1> + <i2,j2> == <i1 + i2, j1 + j2>


So say you have xStart, yStart, xEnd, yEnd

the slope is: <xEnd - xStart, yEnd - yStart>

this vector points from start to end, the length OR magnitude of this vector is the length of the rectangle.

length = sqrt(i*i + j*j) //simple pythagorean

if we take a unit vector from this:

slopeVector / length == < i / len, j / len >

this vector is of length 1... we can now scale this vector easily to whatever length we want... in your image we're looking for 5. But FIRST we want to rotate it 90 degrees!

< j, -i> / len

now we scale it

offset = 5 * <j, -i> / len

now if we add this to <startX, startY> we get the BL, if we subtract if from <startX, startY> we get TL. If we add this to <endX, endY> we get BR, if we subtract it from <endX, endY> we got TR.

There you have your 4 points.

OR you could just get the 2 left points, and add the slopeVector to both of them to get the right points.

It's all relative... you essentially defined free floating vectors describing all 4 sides of the rectangle.

Alguna sugerencia de como llevar esto a actionscript???
Saludos!!!

[Silver]

Resuelto!!!!

[Silver]

Este es el código en AS3, por si alguien lo necesita:

Código PHP:

  // coordenadas iniciales 
var startP:Point = new Point(150,150); 
var endP:Point = new Point(180,210); 
var slop:Point = new Point(startP.x - endP.x, startP.y - endP.y); 
var length:Number = Math.sqrt(slop.x * slop.x + slop.y * slop.y); 
var slopVector:Point = new Point(slop.x/length, slop.y/length); 
var rHeight:int = 5; // altura del rectángulo 
var offset:Point = new Point(rHeight * slop.y / length, rHeight * -slop.x / length);  
 
// obteniendo los 4 puntos para el dibujo 
var topLeft:Point = new Point(startP.x - offset.x, startP.y - offset.y); 
var bottomLeft:Point = new Point(startP.x + offset.x, startP.y + offset.y); 
var topRight:Point = new Point(endP.x - offset.x, endP.y - offset.y); 
var bottomRight:Point = new Point(endP.x + offset.x, endP.y + offset.y);  
 
// dibujando el rectángulo 
var shape:Shape = new Shape(); 
shape.graphics.lineStyle(1,0x000000); 
shape.graphics.beginFill(0xFF0000); 
shape.graphics.moveTo(topLeft.x, topLeft.y); 
shape.graphics.lineTo(topRight.x, topRight.y); 
shape.graphics.lineTo(bottomRight.x, bottomRight.y); 
shape.graphics.lineTo(bottomLeft.x, bottomLeft.y); 
shape.graphics.lineTo(topLeft.x, topLeft.y); 
shape.graphics.endFill(); 
addChild(shape);