Книга: JavaScript. Подробное руководство, 6-е издание

21.4.4.1. Математический смысл преобразований

21.4.4.1. Математический смысл преобразований

На мой взгляд, проще всего разбираться с преобразованиями, имея их геометрическое представление, когда действие методов translate(), rotate() и scale() можнo представить в виде преобразований координатных осей, как показано на рис. 21.7. Преобразования можно также представить алгебраически, в виде системы уравнений, отображающих координаты точки (х,у) в преобразованной системе координат в координаты той же точки (х',у') в исходной системе координат.

Вызов метода c.translate(dx,dy) можно описать следующими уравнениями:

х' = х + dx; // Значение 0 координаты X в новой системе координат
             // соответствует значению dx в старой системе координат
у' = у + dy;

Операцию масштабирования также можно представить в виде простых уравнений. Вызов метода c.scale(sx.sy) можно описать следующим образом:

х' = sx * х;
У' = sy * у;

Операция вращения выглядит несколько сложнее. Вызов с.rotate(a) описывается следующими тригонометрическими уравнениями:

х' = х * cos(a) - у * sin(a);
у’ = у * cos(a) + х * sin(a);

Обратите внимание, что порядок выполнения преобразований имеет большое значение. Допустим, что изначально используется система координат холста по умолчанию, после чего выполняется смещение и затем масштабирование. Чтобы отобразить координаты точки (х,у) в текущей системе координат обратно в координаты (х",у") в системе координат по умолчанию, необходимо сначала применить уравнения масштабирования, чтобы отобразить координаты точки в промежуточные координаты (х',у') точки в смещенной, но не масштабированной системе координат, а затем применить уравнения смещения, чтобы отобразить эти промежуточные координаты точки в координаты (х",у"). В результате получим следующую систему уравнений:

х'' = sx*x + dx;
у'' = sy*y + dy;

Если же к исходной системе координат сначала применялся метод scale (), а затем translate(), мы придем к другой системе уравнений:

х" = sx*(x + dx);
у" = sy*(у + dy);

При использовании алгебраических представлений последовательностей преобразований важно помнить, что в уравнениях они должны следовать в обратном порядке - от последнего преобразования к первому. Однако при использовании геометрических представлений вы работаете с последовательностями преобразований в прямом порядке, от первого к последнему.

Преобразования, поддерживаемые холстом, известны как аффинные преобразования. Аффинные преобразования могут изменять расстояния между точками и углы между линиями, но параллельные линии всегда остаются параллельными после любых аффинных преобразований - с помощью аффинных преобразований нельзя, например, создать эффект искажения типа «рыбий глаз». Любое аффинное преобразование можно описать с помощью шести параметров от а до f, как показано в следующих уравнениях:

х' = ах + су + е
у' = bx + dy + f

К текущей системе координат можно применять любые преобразования, передавая эти шесть параметров методу transform(). На рис. 21.7 показаны два типа преобразований - сдвиг и вращение вокруг указанной точки - которые можно реализовать с помощью метода transfоrm(), как показано ниже:

// Сдвиг:
//х' = х + кх*у;
//У' = У + ку*х;
function shear(c, кх, ку) { с.transform(1, ку, кх, 1, 0, 0); }
// Вращение на theta радиан по часовой стрелке вокруг точки (х,у). Это преобразование
// можно выполнить с помощью последовательности вызовов методов translate,rotate,translate
function rotateAbout(c,theta,x,у) {
  var ct = Math.cos(theta),
      st = Math.sin(theta);
  c.transform(ct, -st, st, ct, -x*ct-y*st+x, x*st-y*ct+y);
}

Метод setTransform() принимает те же аргументы, что и метод transform(), но вместо преобразования текущей системы координат он выполняет преобразование системы координат по умолчанию и делает результат новой текущей системой координат. Метод setTransform() удобно использовать для временного возврата к системе координат по умолчанию:

c.save(); // Сохранить текущую систему координат
с.setTransform(1,0,0,1,0,0): // Вернуться к системе координат по умолчанию
// Выполнить операции с использованием координат по умолчанию CSS-пикселов
c.restore(); // Восстановить сохраненную систему координат

Оглавление книги