2010-12-16 23 views
5

¿Cómo puedo obtener 4 puntos girados un cierto grado alrededor de un puntero para formar un rectángulo? Puedo rotar un punto alrededor de un punto, pero no puedo compensarlo para hacer un rectángulo que no esté distorsionado.Girar el rectángulo alrededor de un punto

+2

que han tratado de hacer hasta ahora? algún código? gracias – Trufa

+3

Traduce tus cuatro puntos para que trates el puntero como el centro, haz la rotación mediante el método de la matriz de rotación estándar y luego traduce los puntos hacia atrás. [Explicación aquí] (http://www.euclideanspace.com/maths/geometry/affine/aroundPoint/index.htm) – Michal

+0

Si entendí que lo usaría, pero necesito una solución en inglés simple o preferiblemente JavaScript. – Anonymous

Respuesta

23

Si puede rotar un punto alrededor de un punto, entonces debería ser fácil rotar un rectángulo; solo debe rotar 4 puntos.

Aquí es una función js para girar alrededor de un punto de origen:

function rotate_point(pointX, pointY, originX, originY, angle) { 
    angle = angle * Math.PI/180.0; 
    return { 
     x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX, 
     y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY 
    }; 
} 

y entonces usted puede hacer esto para cada punto. Aquí se muestra un ejemplo: http://jsfiddle.net/dahousecat/4TtvU/

Cambiar el ángulo y correr golpear a ver el resultado ...

+0

¿Puedes explicar esto? jsfiddle.net/bjhc34xk/7 ¿Tiene esto algo que ver con la aproximación de PI, o quizás errores matemáticos de punto flotante? –

+1

El violín de Félix se bifurcó para incluir un control deslizante para la entrada dinámica para que sea más fácil experimentar: https://jsfiddle.net/brichins/0ccdd362/ – brichins

+2

@MaxMastalerz Estoy seguro de que ya pasó de esto, pero su violín es probablemente no haciendo lo que pensaste Está cambiando la coordenada X de su punto final, en el medio del cálculo, y luego girando la coordenada Y desde ese punto de desplazamiento en lugar del centro. Los resultados en una espiral de oro fresco, pero creo que tenía la intención de hacer esto: https://jsfiddle.net/brichins/w2rxsbt4/ – brichins

Cuestiones relacionadas