Canvas: трансформация контекста

6

Scale

Сейчас узнаем как увеличивать контекст канваса

Операции трансформации на канвасе изменяют текущий контекст.
Метод scale увеличивает текущий контекст рисунка в больший или меньший размер в соответствии с нашими указаниями. Если вы один раз изменили размер контекста, то все следующие рисунки будут увеличены. Позиция, размер и все будет увеличено.
За размер в канвасе отвечает функция:
— context.scale(horizontalScaleFactor, verticalScaleFactor) -> Scale the canvas context
где,
* horizontalScaleFactor (double): Изменяет размер ширины текущих калякулей (1=100%, 0.5 = 50%, etc.)
* verticalScaleFactor (double): Изменяет размер высоты текущих калякулей (аналогично что и предыдущий)

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

Rotate

За поворот контекста отвечает метод context.rotate(rotationAmount), который принимает один аргумент в радианах — угол поворота контекста.

По умолчанию вращение происходит от левого верхнего угла канваса. Но мы можем изменить его.

Translate

Главная цель translate функции переместить холст и его содержимое на новую позицию.
context.translate(x,y) — принимает два аргумента
x — дистанция по горизонтали
y — дистанция по вертикали

context.fillStyle = 'red';
    context.fillRect(50, 50, 160, 160);
    context.fill();

    //translate canvas
    context.translate(300, 300);

    context.fillStyle = 'red';
    context.fillRect(50, 50, 160, 160);
    context.fill();

Transform and setTransform

До сих пор мы рассмотрели 3 функции, отвечающие за манипуляци матрицей контекста холста.
* Scale()
* Rotate()
* Translate()

Матрица трансформации состоит из матрицы 3 на 3.
transformation matrix

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

Браузер применяет матрицу трансформации на ваши объекты, которые вы рисуете.

По умолчанию, матрица трансформации — единичная матрица.

transformation matrix

Когда вы используете scale, rotate или translate, вы изменяете матрицу трансформации. Поэтому это влияет на все последующие рисунки.

Мы используем 6 значений этой матрицы

transformation matrix

Первое значение m11 представляет горизонтальное изменение размера,
Второе m12 представляет горизонтальный скос. Третье m21 представляет вертикальный скос. Четвертое m22 обозначает вертикальное изменение размера. 5 и 6 обозначают горизонтальное и вертикальное смещение соответственно.

transformation matrix

Вот изначальное состояние

transformation matrix

Если вы воспользуетесь функцией изменения размера scale, то матрица изменится как на рисунке ниже

transformation matrix

Если вы воспользуетесь функцией rotate, то матрица будет выглядеть вот так

transformation matrix

По сути мы можем делать любые трансформации изменяя значения матрицы.

Для того чтобы сделать это, есть специальный метод transform.

Этот метод напрямую принимает 6 параметров:
transform(m11,m12,m21,m22,dx,dy)

Далее рассмотрим аналогию функциям.

transform(sx,0,0,sy,0,0) == scale(sx,sy)
transform(cos(alfa), sin(alfa), -sin(alfa), -cos(alfa),0,0) == rotate(alfa)
transform(1,0,0,1,x,y) == translate(x,y)
transform(1,x,y,1,0,0) == skew(x,y)

После того как мы воспользовались функцией transform, матрица трансформации будет обновлена и если мы воспользуемся transform еще раз, то будет обновлена измененная версия матрицы. И мы будем работать с обновленными значениями.

Если вы хотите начинать трансформацию от изначального контекста для каждой операции, то нужно воспользоваться функцией setTransform.

setTransform(m11,m12,m21,m22,dx,dy)

transformation matrix

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

Итак, у вышеописанных двух функций немного разный подход.
transform — продолжает от текущего контекста.
setTransform — продолжнает от первоначального контекста.

Также у нас есть функция resetTransform(). Это функция позволяет сбросить значения текущей матрицы на значения по умолчаню. Что аналогично функции setTransform со следующими аргументами.

context.setTransform(1,0,0,1,0,0);

You might also like More from author

Leave A Reply

Your email address will not be published.