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

Видео урок: Пользовательская трансформация

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

Последняя трансформация, которую мы рассмотрим, - это пользовательская трансформация. В дополнение к трансформациям, встроенным в canvas, вы можете определять собственные. Трансформации определяются как матрицы. У матрицы такой формат, как вы видите здесь. Есть шесть переменных. Это a, b, c, d, e и f. И чтобы использовать трансформацию, находится новая точка, когда применяется эта матрица трансформации к каждой точке изображения, которое трансформируется. Не паникуйте.

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

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

Другими словами, она убирает все предыдущие трансформации и применяет ту, что вы определили. То есть, в первом случае трансформация добавляется к другим, а во втором - нет. Эта функция сбрасывает canvas, а затем применяет трансформацию, которую вы определили. Давайте перейдем к коду и посмотрим, как все работает. Вот я в коде. Открыт файл snippets, раздел custom transform, давайте откроем пример для пользовательской трансформации. Он называется transform_start.

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

Матрица трансформации для трансформации перемещения выглядит вот так. Вот наши шесть переменных. Первая строка - это 1 0, а затем число, на которое вы хотите переместить X, вторая строка - это 0 1, а затем число, на которое вы хотите переместить Y. Помните, что переменные идут в порядке a, b, c, d, e и f. Давайте определим трансформацию. Новый прямоугольник мы хотим сделать красным, поэтому здесь у нас fillStyle. Как и в примере с перемещением, мы переведем прямоугольник в центр canvas.

То есть, x будет шириной canvas, разделенной на 2, а y будет высотой canvas, разделенной на 2: таким способом я получаю середину canvas. И вместо того чтобы использовать функцию translate, мы вызываем функцию transform, и мы передаем ей 1, 0, затем 0, 1, а потом tx и ty. Таким образом, трансформация будет добавлена в canvas, а потом мы добавим прямоугольник, далее мы вызываем трансформацию реверсии, которая перемещает нас обратно в верхний левый угол canvas, только в случае, если мы совершили какую-то операцию по рисованию.

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

Итак, копируем, переходим вот сюда и вставляем. В этом примере мы создадим то, что называется трансформацией смещения. Трансформация смещения иногда называется трансформацией сдвига. В данном случае у нас будет зеленый прямоугольник, и мы сместим объекты, используя различные направления x и y. Итак, трансформация сдвига определяется числом 1, затем идет число, на которое вы хотите сделать смещение по направлению y, далее идет число, на которое вы хотите сделать смещение по направлению x, здесь число 1, а эти два числа находятся слева на 0.

Для этой трансформации мы будем использовать зеленый прямоугольник. А фактор смещения определяется фактором умножения, я умножаю на 0.2 в направлении x, а направление y оставляю так, как есть. В данном случае я использую функцию setTransform, и вы же помните, что она сбрасывает любую трансформацию, которая есть сейчас в canvas. Таким образом, мне не нужно думать о каких-либо трансформациях, которые шли до этой. А затем в этой позиции мы заполняем прямоугольник, точка 250 на 20, и он будет 100 пикселей шириной и 50 высотой.

Сохраняем, переходим в браузер и обновляем. Вы видите, что я нарисовал зеленый прямоугольник, который смещен в направлении X, то есть он немного срезан. Давайте внесем некоторые изменения и посмотрим, как все работает. Возвращаемся к коду. Я могу увеличить смещение. Могу сказать, что оно будет 0.4, и теперь давайте обновим страницу в браузере. Вы видите, что смещение стало больше. А теперь давайте сделаем смещение в направлении y. Устанавливаем это на 0, указываем 0.3, сохраняем и обновляем.

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

Вы можете найти матрицы трансформаций в Интернет и просто вставлять нужные значения в функцию transform. Если вы будете так делать, вы сможете создавать трансформации, которые не встроены в canvas, но которые вы сможете использовать при рисовании.