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

Вызов метода 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; // Восстановить сохраненную систему координат

21.4.4.2. Примеры преобразований

Пример 21.6 демонстрирует мощь, которую дает возможность преобразования системы координат, где за счет рекурсивного применения методов translate, rotate и scale реализовано рисование фракталов - снежинок Коха. Результат работы этого примера представлен на рис. 21.8, где показаны снежинки Коха с количеством уровней рекурсии 0, 1, 2, 3 и 4.

Эти фигуры воспроизводятся весьма изящным программным кодом, но в нем используются рекурсивные преобразования системы координат, что делает его сложным для понимания. Даже если вы не собираетесь углубляться в изучение всех тонкостей примера, обратите все же внимание, что в нем имеется всего один вызов метода lineTo. Каждый отдельный сегмент на рис. 21.8 рисуется следующим образом:

  с.lineТо(len, 0);

Значение переменной len не изменяется в ходе выполнения программы, поэтому позиция, ориентация и длина каждой линии определяется операциями смещения, вращения и масштабирования.

Пример 21.6. Рисование снежинок Коха посредством преобразований системы координат

  var deg = Math.PI/180; // Для преобразования градусов в радианы

  // Рисует n-уровневый фрактал снежинки Коха в контексте холста с, левый нижний угол
  // которого имеет координаты (х,у), а длина стороны равна len.
  function snowflake(c, п, х, у, len) {
   c.saveO; // Сохранить текущее преобразование
   с.translated,у); // Сместить начало координат в начальную точку