Cómo calcular la rotación en 2D en Javascript

Tenemos la mejor respuesta que descubrimos online. Nuestro deseo es que te resulte útil y si puedes aportar algo que nos pueda ayudar a perfeccionar nuestra información hazlo libremente.

Solución:

function rotate(cx, cy, x, y, angle) 
    var radians = (Math.PI / 180) * angle,
        cos = Math.cos(radians),
        sin = Math.sin(radians),
        nx = (cos * (x - cx)) + (sin * (y - cy)) + cx,
        ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return [nx, ny];

Los dos primeros parámetros son las coordenadas X e Y del punto central (el origen alrededor del cual girará el segundo punto). Los siguientes dos parámetros son las coordenadas del punto que rotaremos. El último parámetro es el ángulo, en grados.

Como ejemplo, tomaremos el punto (2, 1) y lo rotaremos alrededor del punto (1, 1) 90 grados en el sentido de las agujas del reloj.

rotate(1, 1, 2, 1, 90);
// > [1, 0]

Tres notas sobre esta función:

1. Para la rotación en el sentido de las agujas del reloj, el último parámetro angle debería ser positivo. Para la rotación en sentido contrario a las agujas del reloj (como en el diagrama que proporcionó), debe ser negativo.

2. Tenga en cuenta que incluso si proporciona argumentos que deberían generar un punto cuyas coordenadas son números enteros, es decir, rotar el punto (5, 0) 90 grados sobre el origen (0, 0), lo que debería generar (0, -5) – – El comportamiento de redondeo de JavaScript significa que cualquier coordenada aún podría ser un valor frustrantemente cercano al número entero esperado, pero aún es un valor flotante. Por ejemplo:

   rotate(0, 0, 5, 0, 90);
   // > [3.061616997868383e-16, -5]
   

   Por esta razón, ambos elementos de la resultante array debe esperarse como un flotador. Puedes convertirlos a números enteros usando Math.round(), Math.ceil()o Math.floor() según sea necesario.

3. Finalmente, tenga en cuenta que esta función asume un sistema de coordenadas cartesianas, lo que significa que los valores en el eje Y aumentan a medida que “sube” en el plano de coordenadas. En HTML/CSS, el eje Y está invertido: los valores en el eje Y aumentan a medida que se mueve abajo de la página.

1. Primero, traslada el centro de rotación al origen.
2. Calcula las nuevas coordenadas (nx, ny)
3. Traducir de nuevo al centro de rotación original

Paso 1

Sus nuevos puntos son

1. centro: (0,0)
2. punto: (x-cx, y-cy)

Paso 2

1. nx = (x-cx)*cos(theta) – (y-cy)*sin(theta)
2. ny = (y-cy)*cos(theta) + (x-cx)*sin(theta)

Paso 3

Traducir de nuevo al centro de rotación original:

1. nx = (x-cx)*cos(theta) – (y-cy)*sin(theta) + cx
2. ny = (y-cy)*cos(theta) + (x-cx)*sin(theta) + cy

Para una explicación más profunda, con algunos diagramas elegantes, recomiendo mirar esto.

La respuesta aceptada anterior no me funciona correctamente, la rotación está invertida, aquí está la función de trabajo

/*
 CX @ Origin X  
 CY @ Origin Y
 X  @ Point X to be rotated
 Y  @ Point Y to be rotated  
 anticlock_wise @ to rotate point in clockwise direction or anticlockwise , default clockwise 
 return @ x,y  
*/
function rotate(cx, cy, x, y, angle,anticlock_wise = false) 
    if(angle == 0)
        return x:parseFloat(x), y:parseFloat(y);
    if(anticlock_wise)
        var radians = (Math.PI / 180) * angle;
    else
        var radians = (Math.PI / -180) * angle;
    
    var cos = Math.cos(radians);
    var sin = Math.sin(radians);
    var nx = (cos * (x - cx)) + (sin * (y - cy)) + cx;
    var ny = (cos * (y - cy)) - (sin * (x - cx)) + cy;
    return x:nx, y:ny;
 

Sección de Reseñas y Valoraciones

Al final de la web puedes encontrar las explicaciones de otros sys admins, tú de igual forma eres capaz dejar el tuyo si lo deseas.

---

---

Utiliza Nuestro Buscador