HTML5 Canvas: вычисление оси, точки y при повороте

Question

Я разрабатываю приложение HTML5 Canvas, и оно включает чтение XML-файла, в котором описывается положение стрелок, прямоугольников и других фигур, которые мне нужно нарисовать на холсте.

Пример макета 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"/> 

Если объект вращается, он включает вычисление положения точки (называемой P новой позицией объекта после вращения) при вращении вокруг другой точки (слева, сверху).Я пытаюсь придумать общую функцию / формулу, которую я могу использовать для вычисления этой точки P, но моя математика немного слабая, и я не могу определить, какую формулу дуги / тангенса я собираюсь использовать.

Можете ли вы помочь мне придумать формулу, которую я могу использовать для вычисления точки P для поворотов, которые могут быть как положительными, так и отрицательными?

В приведенном выше примере: точка (14,446) - это левая, верхняя точка и точка (226,496) - это средняя точка объекта, когда НЕ вращается, поэтому точка = (влево + ширина / 2, верх + высота / 2), а синяя точка - серединаточка при повороте.Я знаю, как рассчитать длину линии между точками (14,446) и (226,496), но не знаю, как рассчитать синюю точку x, y position - Кстати: длина этой линии такая же, как и линия между синей точкой &(14,446)

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

Answer 1

Это довольно просто. При вращении вокруг начала системы координат для угла тета-координаты (x, y) изменяются как

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

Итак, все, что вам нужно, это перевести точку вращения в одну из ваших точек. Давайте напишем это более упрощенным способом: (x1, y1) = (14,446) и (x2, y2) = (226,496). Вы пытаетесь «вращаться» (x2, y2) вокруг (x1, y1). Вычислить (dx2, dy2) в новой системе координат с началом координат в (x1, y1).

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

Теперь поверните (положительные углы против часовой стрелки):

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

Последний шаг - перевод координат точки из начала координат в точке (x1, y1) обратно в исходное положение (0,0);

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

пс: читайте также это :) http://en.wikipedia.org/wiki/Rotation_matrix и не забывайте, что большинство тригонометрических функций в разных языках программирования в основном работают с радианами.

pps: и я надеюсь, что я вас не напугал - спросите, есть ли у вас какие-либо вопросы.

Answer 2

Я думаю, что в вашем случае вы сможете рассчитать эту позицию вращения с помощью следующей системы уравнений:

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

R длина вектора радиуса вашего (len в вашем примере).
deg угол в градусах, на которые вы поворачиваетесь, ig 120 °
x и y координаты конечной позиции, которую вы ищете.
angle - фактический угол поворота(в рад, а не в градусах).
angle0 - начальная угловая точка, повернутая относительно оси X.Нам нужно его пересчитать, используя Math.atan.

Не проверял.Так что попробуйте.Но идея такая же - использовать тригонометрические функции.

Answer 3

Пример расчета координат: Бросок костей