Понимание масштаба холста HTML 5 и порядок перевода

Я занимаюсь графикой вокруг центра X, Y 0,0. Когда это время для рендеринга, я переставляю с переводом, а затем использую масштаб, чтобы граф заполнил холст (например, масштабируйте все на 50%, например).

Я замечаю, что имеет значение, называете ли вы масштаб, а затем переводите, или переводите, а затем масштабируете, и я не могу его обвести. Это проблема, потому что все не всегда подходит, но моя ментальная модель не завершена, поэтому трудно ее исправить.

Может кто-нибудь объяснить, почему вопрос о масштабах и переводе вызовов имеет значение?

ОТВЕТЫ

Ответ 1

Итак, давайте нарисуем сетку на холсте 300x300:

http://jsfiddle.net/simonsarris/4uaZy/

enter image description here

Это будет сделано. Ничего особенного. Красная линия обозначает, где происхождение расположено, пробегая (0,0) и простираясь очень далеко, поэтому, когда мы переводим его, мы что-то увидим. Происхождение здесь - верхний левый угол, где красные линии встречаются в (0,0).

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

Итак, давайте переведем холст на 100 100, переместив его вниз + вправо:

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/1/

Итак, мы перевели источник, в котором красный X центрирован. Происхождение теперь составляет 100 100.

Теперь мы переведем, а затем масштабируем. Обратите внимание, как источник находится в том же месте, что и последнее изображение, все в два раза больше.

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/2/

Boom. Оргин все еще на 100 100. Однако все надувается на 2. Происхождение изменилось, затем все надулось на месте.

Теперь посмотрим на них в обратном порядке. На этот раз мы масштабируем сначала, так что с самого начала все жирное:

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/3/

Все надувается 2. Начальная точка находится в 0,0, ее начальной точке.

Теперь мы делаем масштаб, а затем перевод.

enter image description here

http://jsfiddle.net/simonsarris/4uaZy/4/

Мы переводим на 100 100 неподвижных, но начало координат переместилось на 200 200 в реальных пикселях. Сравните это с двумя предыдущими изображениями.

Это потому, что все, что происходит после шкалы, нужно масштабировать, включая дополнительные преобразования. Таким образом, преобразование на (100,100) на масштабированном холсте приводит к тому, что он перемещается на 200, 200.

В этой статье мы должны помнить, что изменение трансформации влияет на то, как вещи рисуются (или трансформируются!) с тех пор. Если вы масштабируете x2, а затем переводите, перевод будет x2

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

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

Это имитирует весь процесс преобразования, выполненный с помощью canvas, и позволяет увидеть, как предыдущие преобразования изменяют те, которые появляются впоследствии.

Ответ 2

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

Вот хорошее чтение: Почему порядок преобразования значителен