Поворот изображения на холсте и сохранение его перетаскиваемым - PullRequest
0 голосов
/ 13 августа 2010

У меня есть изображение, которое я рисую на холсте.Когда мышь щелкает и перетаскивает, я получаю координаты мыши и использую их для установки положения X и Y изображения.После этого я перерисовываю холст.Это работает как брелок, и я могу перемещать изображение по холсту.

Но теперь я делаю 2 кнопки, чтобы я мог поворачивать изображение влево и вправо.Когда я поворачиваю изображение, оно теперь перемещается относительно угла, который я повернул.Поэтому, когда я поворачиваю изображение на 180 градусов и перетаскиваю изображение вверх, оно падает!Я не знаю, почему это происходит или как я могу это компенсировать.: (

Ну, я понимаю, что я могу быть немного расплывчатым, поэтому вот демонстрация проблемы.

Ответы [ 3 ]

2 голосов
/ 07 февраля 2011

Я не могу получить доступ к демонстрационной ссылке, которую вы указали, но она должна быть универсальной.

Вам необходимо переместить ваш объект к основанию вашего координатного пространства o:(0,0), выполнить вращение, а затем переместить ваш объектобратно туда, где он был до того, как вы его переместили, и поскольку все ваши преобразования объединены в единую матрицу преобразований, порядок преобразований очень важен, и вам, в основном, просто нужно сделать их обратно, то есть переместить объект обратно в исходное положение, затем поверните его, а затем переместите его в базу координатного пространства:

ctx.translate(objects_x_position, objects_y_position);
ctx.rotate(angle);
ctx.translate(-objects_x_position, -objects_y_position);

И вуаля.Вот демо: http://jsfiddle.net/ArtBIT/CdbWx/1

1 голос
/ 13 августа 2010

попробуйте поменять эти две строки

oContext.translate(oImage.size.x /2 ,oImage.size.y / 2);
oContext.rotate(oImage.rotate * Math.PI/180);

сначала поверните, а затем переведите.

0 голосов
/ 16 января 2018

Аналогично ответу ArtBIT, но учитывая, что вы хотите повернуть из центра, я бы использовал код:

ctx.translate(width/2, height/2);
ctx.translate(objects_x_position, objects_y_position);
ctx.rotate(angle);
ctx.translate(-objects_x_position, -objects_y_position);
ctx.translate((width/-2), height/-2); 
...