как определить точку на холсте после поворота холста

Question

Я работаю над приложением html5 canvas, в котором я рисую прямоугольник на холсте.

1. Canvas - это tarnslate для центральной позиции
2. Используйте функцию fillRect для рисования прямоугольника
3. Canvas - абсолютная позиция относительно родительского элемента div.Он работает правильно, когда холст находится в исходном положении, но когда я поворачиваю холст на 90/180/270 градусов, я не могу связать точку, нажатую на экране, и точку для рисования на холсте.Например: когда холст находится в исходном положении, я могу получить щелчок точки на экране, а затем перенести эту точку на точку холста, чтобы нарисовать прямоугольник согласно моей позиции перевода.Но когда я поворачиваю холст на 90/180/270 градусов, я не могу преобразовать эту точку экрана в точку холста.поэтому форма рисуется в нечетной / другой позиции, а затем фактически щелкается пользователем.

Мой вопрос:

Когда вращается холст, как перевести точку, щелкнувшую по экрану, вточка рисования холста по его повороту

Answer 1

Я сделал крошечный класс преобразования для этой цели:

https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js

Затем вы можете использовать его так:

var t = new Transform();
console.log(t.transformPoint(5,6)); // will be just [5,6]
// apply the same transformations that you did to the canvas
t.rotate(1);
console.log(t.transformPoint(5,6)); // will be [-2.347, 7.449]

скрипка:

http://jsfiddle.net/DRf9P/

Answer 2

I am affraid that we will have to use math.

Поверните точку на отрицательное значение угла поворота, чтобы получить ее положение на повернутой плоскости, используя это уравнение:

nX = x * cos(a) - y * sin(a)

nY = x * sin(a) + y * cos(a)

где a отрицательно от значения вращения

Ваша точка теперь находится на обычной не повернутой плоскости, поэтому остальная логика такая же, как когда angle = 0

Вот демонстрационная скрипка для вас:

http://jsfiddle.net/Q6dpP/5/

А вот и версия с переводом:

http://jsfiddle.net/Q6dpP/6/