Lienzo HTML5: cálculo de un punto x, y cuando se rota

Question

Desarrollo de una aplicación de Canvas HTML5 e implica la lectura de un archivo xml que describe la posición de las flechas, rectas y otras formas que necesito dibujar en el lienzo.

ejemplo de la disposición XML:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

Si el objeto se gira que implica el cálculo de la posición de un punto (llamado P la nueva posición del objeto después de la rotación) cuando se gira alrededor de otro punto (izquierda, parte superior). Estoy tratando de encontrar una fórmula/función general que pueda usar para calcular este punto P, pero mi matemática es un poco débil & No puedo identificar qué fórmula de arco/tangente estoy destinado a usar.

¿Puede ayudarme a encontrar una fórmula que pueda usar para calcular el punto P para rotaciones que pueden ser positivas & negativa?

En el ejemplo anterior: punto (14.446) es la izquierda, punto superior & punto (226,496) es el punto del objeto mediados cuando NO girar de modo que el punto = (izquierda + ancho/2 , arriba + altura/2) y el punto azul es el punto medio cuando se gira. Sé cómo calcular la longitud de la línea entre los puntos (14,446) & (226,496) pero no cómo calcular el punto azul x, posición y - Por cierto: la longitud de esta línea es la misma que la línea entre el punto azul & (14,446)

len = sqrt((496-446)^2 + (226-14)^2); 
    = 227.56; 

Answer 1

Es bastante simple. En rotación alrededor del origen del sistema de coordenadas para el ángulo Theta coordenadas (x, y) están cambiando a medida que

x' = x * cos(Theta) - y * sin(Theta); 
y' = x * sin(Theta) + y * cos(Theta); 

Por lo tanto, todo lo que necesita es traducir el punto de giro a uno de los puntos que tiene. Vamos a escribirlo de una manera más simplificada: (x1, y1) = (14,446) y (x2, y2) = (226,496). Está intentando "girar" (x2, y2) alrededor (x1, y1). Calcule (dx2, dy2) en un nuevo sistema de coordenadas con el origen en (x1, y1).

(dx2,dy2) = (x2-x1,y2-y1); 

Ahora giran (ángulos positivos están a la izquierda):

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees); 
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees); 

El último paso consiste en traducir coordenadas del punto desde el origen al (x1, y1) volver a la original (0,0);

x2' = dx2' + x1; 
y2' = dy2' + y1; 

ps: leer también esta :) http://en.wikipedia.org/wiki/Rotation_matrix y no se olvide que la mayoría de las funciones trigonométricas en diferentes lenguajes de programación ocupan sobre todo radianes ..

pps: y espero que no te he asustado - pregunte Si tienes alguna pregunta.

Answer 2

creo en su caso, debe ser capaz de calcular esta posición de rotación con el siguiente sistema de ecuaciones:

x = R * Math.cos(angle - angle0); 
y = R * Math.sin(angle - angle0); 
angle = deg * Math.PI/180; 
angle0 = Math.atan(y0/x0); 

R la longitud del radio vector yor (len en su ejemplo).
deg ángulo en grados en los que está girando, i.g 120 °
x y y las coordenadas de la posición final que está buscando.
angle es el ángulo de rotación real (en rad, no grads).
angle0 es el punto de ángulo inicial girado para relativly al eje X. Necesitamos precalcularlo usando Math.atan.

No lo he probado. Así que pruébalo. Pero la idea es similar: hacer uso de funciones trigonométricas.

Answer 3

Un ejemplo de coordenadas de cálculo: Dice roll