Предыдущий ролик Следующий ролик  

Видео урок: Трансформация масштабирования

HTML5: графика и анимация с Canvas

Трансформация по масштабу делает так, чтобы операции по рисованию масштабировались в направлениях X и Y. И вы можете масштабировать операции по направлениям X и Y независимо друг от друга. Вы добавляете фактор масштабирования для X и фактор масштабирования для Y. Трансформация масштабирования довольно проста. Допустим, у меня есть прямоугольник 20 пикселей шириной и 10 пикселей высотой. Теперь, если я использую трансформацию масштабирования и передам, допустим, фактор 2 для обоих направлений X и Y, результат будет такой же, как если бы я вызвал ту же самую функцию, даже если бы я сказал заполнить прямоугольник в 20 пикселей в ширину и 10 в высоту, поскольку из-за фактора масштабирования это будет 40 пикселей в ширину и 20 в высоту. Теперь давайте взглянем на код и посмотрим, как все работает.

Вот я в редакторе кода, раздел Scale Transform. Давайте откроем пример scale. Вот нужный нам код. Возвращаемся в snippets. Беру этот кусок кода и вставляю его. Я хочу отметить несколько вещей. Во-первых, я использую синий цвет, чтобы заполнить прямоугольник на позиции 0,0.

Теперь я выполняю трансформацию масштабирования и нарисовать прямоугольник такого же размера, но в другом месте. Вы видите, что высота и ширина такая же. Я просто смещаю этот прямоугольник, чтобы он был виден. Также я использую сохранение и восстановление, чтобы сохранить рисующий контекст canvas и восстановить его после рисования. Сохраняем. Идем к scale_start. Вы видите, что прямоугольники на месте, все верно. Вот первый прямоугольник, а вот второй.

Мы сказали нарисовать их одинакового размера, но из-за фактора масштабирования один из них больше. А теперь давайте посмотрим, какую пользу может принести сохранение и восстановление состояния canvas. Предположим, что у меня есть другой вызов scale, но в данном случае я хочу сделать масштаб меньше. Вместо 1.50 я меняю этот также на 0.5, и то же самое я делаю с fillRect, и на самом деле я его немного смещаю - 325 - вот мы можем его видеть.

Давайте вернемся в canvas и посмотрим, что происходит. Обновляем страницу. на самом деле, мне нужно было бы переместить его немного больше. Вы видите, что фактор масштабирования на самом деле не влияет на прямоугольник так, как мы этого ожидали, потому что сперва я увеличил масштаб, а затем уменьшил. Если я сохраню и восстановлю это, посмотрите, как все поменяется.

Сохраняем, возвращаемся и обновляем страницу. Видите, прямоугольник действительно уменьшился. Я вызвал эту функцию scale после вот этой функции, а вы помните, что трансформации добавляются друг к другу. То есть, я перехожу от фактора масштабирования 1 к фактору 1.5, а затем 2. Затем я уменьшаю фактор масштабирования наполовину. И именно вот эта функция уменьшает фактор наполовину, а не первоначальная. Но если сделать сохранение и восстановление, эта функция scale повлияет на региональный фактор масштабирования рисующего контекста, который составляет 1, и 1 идет в направлениях X и Y.

Мы рассмотрели, как использовать трансформацию масштабирования, а также мы увидели, как использовать сохранение и восстановление, чтобы сохранить рисующий контекст canvas, так чтобы трансформация не влияла на все подряд.