Угловое смещение на холсте

Question

У меня есть квадрат (100px x 100px) с началом координат в 0,0 (вверху слева). Когда я перемещаю мышь, скажем, 10 пикселей x и y, я перемещаю начало координат в соответствии со смещением, а затем начало координат становится 10,10, простым. Работает отлично!

Когда я вращаю квадрат, моя функция вращения поворачивает его нормально, но затем, после поворота квадрата, скажем, на 10 градусов, начальная точка должна перемещаться в соответствии с вращением. И теперь я понятия не имею, какую формулу я должен применить, чтобы добавить ее!

Я википедия, но я думаю, что это слишком сложно.

http://en.wikipedia.org/wiki/Angular_displacement

и

http://en.wikipedia.org/wiki/Cosine#Sine.2C_cosine.2C_and_tangent

Пример: после поворота на 90 градусов влево источник теперь находится по адресу: внизу слева, теперь, когда я перемещаю мышь вправо, изображение идет вверх !!!!

Answer 1

Если я правильно понимаю вашу проблему, вы применяете смещение к точкам прямоугольника на основе положения мыши, а затем поворачиваете получившиеся точки относительно начала координат.

Вместо этого попробуйте применить смещение мыши после вращения, а не раньше.

Answer 2

Предположим, у вас есть фигура, и вы хотите повернуть ее на угол alpha и перевести ее так, чтобы точка (cx, cy) фигуры после преобразования превратилась в (sx, sy).

Преобразование

transformed_x = x*cos(alpha) - y*sin(alpha) + offset_x
transformed_y = x*sin(alpha) + y*cos(alpha) + offset_y

для вычисления желаемых значений offset_x и offset_y, вам просто нужно поместить ваше требование о (cx, cy) и (sx, sy) в вышеприведенные уравнения:

sx = cx*cos(alpha) - cy*sin(alpha) + offset_x
sy = cx*sin(alpha) + cy*cos(alpha) + offset_y

и теперь вы можете легко извлечь значения смещения из этого:

offset_x = sx - cx*cos(alpha) + cy*sin(alpha)
offset_y = sy - cx*sin(alpha) - cy*cos(alpha)

Чтобы настроить для него преобразование canvas, достаточно просто позвонить

context.translate(sx - cx*Math.cos(alpha) + cy*Math.sin(alpha),
                  sy - cx*Math.sin(alpha) - cy*Math.cos(alpha));
context.rotate(alpha);

Вы можете увидеть небольшую демонстрацию этой формулы по этой ссылке .