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

У меня есть квадрат (100 x 100 пикселей) с началом координат 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 градусов влево начало координат теперь находится в нижнем левом углу, теперь, когда я перемещаю мышь вправо, изображение идет ВВЕРХ !!!!


formula math
person menardmam    schedule 26.10.2011    source источник
comment
Я думаю, что этот вопрос может относиться к math.stackexchange.com   -  person ewok    schedule 27.10.2011
comment
Хотите повернуть квадрат вокруг его центра? Если да, то это сообщение на форуме может помочь: gamedev.net/topic/   -  person Dan W    schedule 27.10.2011
comment
Вы пытаетесь отменить преобразование, чтобы преобразовать положение мыши на повернутом квадрате в соответствующую точку на исходном квадрате? Этот вопрос может быть актуальным.   -  person finnw    schedule 27.10.2011

Ответы (2)


arrow_upward
1
arrow_downward

Предположим, у вас есть фигура, и вы хотите повернуть ее на угол 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)

Чтобы настроить для него преобразование холста, вам нужно просто вызвать

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

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

person 6502    schedule 26.10.2011

arrow_upward
2
arrow_downward

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

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

person comingstorm    schedule 26.10.2011
comment
очевидный ответ, который не подходит, но я очень стараюсь, чтобы он работал ... не повезло! - person menardmam; 27.10.2011