Как рассчитать вращение в 2D в Javascript

Ответ 1

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];
}

Первые два параметра - это координаты X и Y центральной точки (источник, вокруг которого будет повернута вторая точка). Следующие два параметра - это координаты точки, которую мы будем вращать. Последний параметр - это угол в градусах.

В качестве примера мы возьмем точку (2, 1) и повернем ее вокруг точки (1, 1) на 90 градусов по часовой стрелке.

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

Три примечания об этой функции:

• Для вращения по часовой стрелке последний параметр angle должен быть положительным. Для вращения против часовой стрелки (как на приведенной диаграмме) он должен быть отрицательным.

• Обратите внимание, что даже если вы предоставляете аргументы, которые должны давать точку, координаты которой являются целыми числами, т.е. вращение точки (5, 0) на 90 градусов относительно начала координат (0, 0), которое должно давать ( 0, -5) - поведение округления JavaScript означает, что любая координата по-прежнему может быть значением, которое, к сожалению, близко к ожидаемому целому числу, но по-прежнему является поплавком. Например:

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

  По этой причине оба элемента результирующего массива следует ожидать как поплавок. Вы можете преобразовать их в целые числа, используя Math.round(), Math.ceil() или Math.floor() по мере необходимости.

• Наконец, обратите внимание, что эта функция принимает декартовую систему координат, что означает, что значения по оси Y становятся выше, когда вы идете "вверх" в координатной плоскости. В HTML/CSS ось Y инвертируется - значения по оси Y становятся выше при перемещении вниз по странице.

Ответ 2

• Сначала переведите центр вращения в начало координат
• Вычислить новые координаты (nx, ny)
• Вернитесь к исходному центру вращения

Шаг 1

Ваши новые точки

• center: (0,0)
• point: (x-cx, y-cy)

Шаг 2

• nx = (x-cx) * cos (theta) - (y-cy) * sin (theta)
• ny = (y-cy) * cos (theta) + (x-cx) * sin (theta)

Шаг 3

Вернитесь к исходному центру вращения:

• nx = (x-cx) * cos (theta) - (y-cy) * sin (theta) + cx
• ny = (y-cy) * cos (theta) + (x-cx) * sin (theta) + cy

Для более глубокого объяснения, с некоторыми причудливыми диаграммами, я рекомендую посмотреть this.

Ответ 3

выше принятый ответ не работает для меня правильно, вращение поменялись местами, здесь работает функция

/*
 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:parseInt(x), y:parseInt(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};
 }