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

Содержание
  1. Введение Поворот, перенос и масштабирование выполняются с помощью матрицы преобразования — набора из девяти чисел, которые используются для преобразования двумерного массива, такого как растровое изображение, с помощью линейной алгебры. Математически все преобразования могут быть представлены в виде матриц преобразования 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) Параметры Тип Описание m11 number Значение m1,1 в матрице. [Увеличивает или уменьшает размер пикселей по горизонтали.] m12 number Значение m1,2 в матрице. [Это эффективно поворачивает ось X вверх или вниз.] m21 number Значение m2,1 в матрице. [Это фактически поворачивает ось Y влево или вправо.] m22 number Значение m2,2 в матрице. [Увеличивает или уменьшает размер пикселей по вертикали.] dx number Значение дельты x (dx) в матрице. [Перемещает всю систему координат по горизонтали] dy number Дельта y ( dy) значение в матрице. [Перемещает всю систему координат по вертикали.] Метод setTransform () Метод setTransform ( a, b, c, d, e, f) сбрасывает текущее преобразование в единичную матрицу, а затем вызывает метод transform (a, b, c, d, e, f) с теми же аргументами. ctx.setTransform (m11, m12, m21, m22, dx, dy) Параметры Тип Описание m11 number Значение m1,1 в матрице. [Увеличивает или уменьшает размер пикселей по горизонтали.] m12 number Значение m1,2 в матрице. [Это эффективно поворачивает ось X вверх или вниз.] m21 number Значение m2,1 в матрице. [Это фактически поворачивает ось Y влево или вправо.] m22 number Значение m2,2 в матрице. [Увеличивает или уменьшает размер пикселей по вертикали.] dx number Значение дельты x (dx) в матрице. [Перемещает всю систему координат по горизонтали] dy number Дельта y ( 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 ():

    Вывод:


          Matrix Transforms и методы 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.
    
    
    
  2. метод transform ()
  3. Метод setTransform ()
  4. Установка матрицы для отражения
  5. Пример: эллипс

Введение

Поворот, перенос и масштабирование выполняются с помощью матрицы преобразования — набора из девяти чисел, которые используются для преобразования двумерного массива, такого как растровое изображение, с помощью линейной алгебры. Математически все преобразования могут быть представлены в виде матриц преобразования 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) 
Параметры Тип Описание
m11 number Значение m1,1 в матрице. [Увеличивает или уменьшает размер пикселей по горизонтали.]
m12 number Значение m1,2 в матрице. [Это эффективно поворачивает ось X вверх или вниз.]
m21 number Значение m2,1 в матрице. [Это фактически поворачивает ось Y влево или вправо.]
m22 number Значение m2,2 в матрице. [Увеличивает или уменьшает размер пикселей по вертикали.]
dx number Значение дельты x (dx) в матрице. [Перемещает всю систему координат по горизонтали]
dy number Дельта y ( dy) значение в матрице. [Перемещает всю систему координат по вертикали.]

Метод setTransform ()

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

 ctx.setTransform (m11, m12, m21, m22, dx, dy) 
Параметры Тип Описание
m11 number Значение m1,1 в матрице. [Увеличивает или уменьшает размер пикселей по горизонтали.]
m12 number Значение m1,2 в матрице. [Это эффективно поворачивает ось X вверх или вниз.]
m21 number Значение m2,1 в матрице. [Это фактически поворачивает ось Y влево или вправо.]
m22 number Значение m2,2 в матрице. [Увеличивает или уменьшает размер пикселей по вертикали.]
dx number Значение дельты x (dx) в матрице. [Перемещает всю систему координат по горизонтали]
dy number Дельта y ( 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 ():

Вывод:


      Matrix Transforms и методы 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.

Оцените статью
nanomode.ru
Добавить комментарий