Как установить перевод холста в верхний левый угол после поворота

Question

Я рисую символ с простыми линиями, но хочу, чтобы пользователь мог указать вращение (только в 90 градусов). Что также означает, что размеры моего холста меняются.

Нет, я рассчитываю размеры и устанавливаю размер холста. Затем я устанавливаю центр вращения в центр моего холста (с помощью ctx.translate) и поворачиваюсь на произвольные градусы.

Теперь моя проблема: как вернуть перевод в верхний левый угол, чтобы я мог нормально рисовать свой символ из этой позиции? Мне действительно нужно вычислять значения с вращением?

Спасибо.

Answer 1

Отличный вопрос!translate rotate и scale - все функции, которые работают с текущей матрицей.Это дает вам много вариантов.Вероятно, самое простое - выполнить восстановление с сохранением в матрице контекста

ctx.save();
ctx.translate ( to the center );
ctx.rotate ( do rotation );
//Draw rotated stuff
ctx.restore();
//Draw non-rotated stuff

Теперь, после вызова функции восстановления, матрица возвращается к тому, что было до последнего сохранения. В opengl это фактически стек,и вы можете использовать много контекстов, но я не уверен, что webgl поддерживает это.

Эта ссылка также может быть полезна: https://developer.mozilla.org/en/drawing_graphics_with_canvas

Надеюсь, это поможет.

Обновление:

Да.Хорошо, так что вы немного неправильно поняли.Переводы и повороты применяются перед чертежом.Это из-за большого количества сложной математики, и действительно выходит за рамки этого вопроса.Так что если вы хотите нарисовать часть вашего холста, повернутую в одну сторону, а другую часть повернуть другим способом, сначала вы save, затем примените преобразования, выполните первую часть рисунка, затем restore, чтобы получитьвернуться в предварительно преобразованное состояние.В какой момент вы можете повторить.Так, например, вы можете сделать это:

ctx.save();
ctx.translate ( x_center, y_center );
ctx.rotate ( 90 );
//Draw your rotated stuff starting at the center
ctx.translate ( -x_center, -y_center );
//Draw your main frame stuff that is all rotated around the center
ctx.restore();
ctx.save();
ctx.rotate ( 90 );
//Draw your text which is rotated around the top-left corner
ctx.restore();

Таким образом, у вас есть 1 функция рисования, и вы просто настраиваете контекст перед тем, как рисовать различные компоненты.