HTML5 Canvas: матричные преобразования

Введение

Поворот, перенос и масштабирование выполняются с помощью матрицы преобразования — набора из девяти чисел, которые используются для преобразования двумерного массива, такого как растровое изображение, с помощью линейной алгебры. Математически все преобразования могут быть представлены в виде матриц преобразования 3×3 следующего вида:

Поскольку в приведенной выше матрице 3×3 используются только шесть значений, матрица преобразования также выражается как вектор: [abcdef].

Преобразования отображают координаты и длины из новой системы координат в предыдущую. система

Простые преобразования представлены в матричной форме следующим образом:

Перевод эквивалентен матрице —

или [1 0 0 1 tx ty], где tx и ty — расстояния для перевода координат в X и Y соответственно.

Масштабирование эквивалентно матрице —

:или [sx 0 0 sy 0 0], одна единица измерения в направлениях X и Y в новой системе координат равна sx и sy в предыдущей системе координат, учитывая ививо.

Вращение относительно начала координат эквивалентно матрице —

или [cos (a) sin (a) -sin (a) cos (a) 0 0], что приводит к повороту осей системы координат на угол a.

Преобразование наклона по оси x эквивалентно матрице —

или [1 0 tan (a) 1 0 0], что приводит к смещению координат X на угол a.

Преобразование смещения по оси y эквивалентно матрице —

Вы можете изменить положение начала координат (0,0) поверхности рисования, вызвав метод translate (x, y). Начало системы координат холста перемещается в точку (x, y). Используя контекстный метод поворота (угла), вы можете повернуть систему координат холста вокруг его начала. Система координат повернута на угол в радианах по часовой стрелке. Все, что уже находится на холсте, не затрагивается, но последующие операции рисования поворачиваются. Преимущество этих методов заключается в том, что масштабирование выполняется не просто на несколько пикселей.
Эти базовые методы преобразования на самом деле являются аффинными преобразованиями, вычисляемыми с помощью матриц, при этом каждое новое преобразование вносит новое преобразование в предыдущую матрицу. Вы можете определить свои собственные матрицы следующим образом.

Это делается одним из следующих способов:

• transform (a, b, c, d, e, f)
• setTransform (a, b, c, d, e, f)

Примечание: аргументы a, b, c, d, e и f иногда называются m11, m12, m21, m22, dx и dy или m11, m21, m12, m22, dx. , и dy.

метод transform ()

Метод transform () используется для изменения матрицы преобразования текущего контекста.

Синтаксис:

 ctx.transform (m11, m12, m21, m22, dx, dy) 

Метод setTransform ()

Метод setTransform ( a, b, c, d, e, f) сбрасывает текущее преобразование в единичную матрицу, а затем вызывает метод transform (a, b, c, d, e, f) с теми же аргументами.

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

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

Пример — 1:
Следующий веб-документ рисует прямоугольник с помощью метода transform ():

Вывод:

Код:

      Матричные преобразования       var canvas = document.getElementById ("DemoCanvas"  ); if (canvas.getContext) {var ctx = canvas.getContext ('2d'); ctx.beginPath (); ctx.lineWidth = "3"; var cos = Math.cos (45 * Math.PI/180)  ; var sin = Math.cos (45 * Math.PI/180); ctx.transform (cos, sin, -sin, cos, 160, 20); ctx.strokeStyle = "красный"; ctx.strokeRect (60, 60  , 160, 160); ctx.stroke ();}     
 Пример - 2: 
 Следующая сеть  документ рисует прямоугольник, аналогичный предыдущему примеру, с помощью методов translate () и rotate (): 
 
  Вывод:  
 
 
 
           var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.getContext ('2d');  ctx.beginPath ();  ctx.translate (160, 20);  ctx.rotate (45 * Math.PI/180);  ctx.strokeStyle = "красный";  ctx.strokeRect (60, 60, 160, 160);  ctx.stroke ();  }    
 Установка матрицы для отражения 
 Вызов ctx.setTransform (1, 0, 0  , -1, 0, 0) вы можете установить матрицу преобразования, чтобы отразить все вокруг оси y.  Поэтому все операции рисования приводят к перевернутому изображению, а все координаты y умножаются на -1. 
 Вызов ctx.setTransform (-1, 0, 0, 1, 0, 0)  вы можете настроить матрицу преобразования, чтобы отразить все вокруг оси x.  Поэтому все операции рисования приводят к зеркальному отображению, а все координаты x умножаются на -1. 
 В следующем примере весь текст отражается вокруг оси y. 
  Вывод:  
   
  Код:  
           var canvas = document.getElementById ("DemoCanvas"); if (canvas.getContext) {var ctx = canvas.  getContext ('2d');  ctx.beginPath ();  ctx.lineWidth = "3";  var cos = Math.cos (45 * Math.PI/180);  var sin = Math.cos (45 * Math.PI/180);  ctx.transform (cos, sin, -sin, cos, 160, 20);  ctx.strokeStyle = "красный";  ctx.strokeRect (60, 60, 160, 160);  ctx. Инсульт();  }    
 Пример: эллипс 
 В следующем примере рисуется эллипс, где метод transform ()  использовал и масштабировал холст в соответствующем направлении, чтобы круг превратился в эллипс. 
  Вывод:  
   
  Код:  
           var canvas = document.getElementById ("DemoCanvas"); если (холст.getContext) {var ctx = canvas.getContext ('2d');  ctx.transform (1.6,0,0,1,0,0);  ctx.beginPath ();  ctx.fillStyle = 'красный';  ctx.lineWidth = 4;  ctx.arc (60, 60, 45, 0, 2 * Math.PI, истина);  ctx.stroke ();  ctx.fill ();  }    
  Редактор кода:  
 См. перо  Общий редактор html css от w3resource (@ w3resource) onCodePen.