Вход/Регистрация
JavaScript. Подробное руководство, 6-е издание
вернуться

Флэнаган Дэвид

Шрифт:

Метод

translate
просто смещает начало системы координат влево, вправо, вверх или вниз. Метод
rotate
выполняет вращение осей координат по часовой стрелке на указанный угол. (Прикладной интерфейс объекта
Canvas
всегда измеряет углы в радианах. Чтобы преобразовать градусы в радианы, необходимо разделить значение в градусах на 180 и умножить на
Math.PI
.) Метод
scale
растягивает или сжимает расстояния по оси X или Y.

Передача отрицательного коэффициента масштабирования методу

scale
переворачивает соответствующую ему ось относительно начала системы координат, создавая зеркальное ее отражение. Именно это преобразование можно наблюдать внизу слева на рис. 21.7: вызов метода
translate
сместил начало координат в левый нижний угол холста, а вызов метода
scale
перевернул ось Y так, что значения координаты Y стали увеличиваться в направлении снизу вверх. Такая перевернутая система координат должна быть знакома вам по школьному курсу алгебры, и она может пригодиться для рисования графиков и диаграмм. Отметьте, однако, что текст после такого преобразования очень трудно читать!

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
, как показано ниже:

// Сдвиг:

//х' = х + кх*у;

  • Читать дальше
  • 1
  • ...
  • 415
  • 416
  • 417
  • 418
  • 419
  • 420
  • 421
  • 422
  • 423
  • 424
  • 425
  • ...

Ебукер (ebooker) – онлайн-библиотека на русском языке. Книги доступны онлайн, без утомительной регистрации. Огромный выбор и удобный дизайн, позволяющий читать без проблем. Добавляйте сайт в закладки! Все произведения загружаются пользователями: если считаете, что ваши авторские права нарушены – используйте форму обратной связи.

Полезные ссылки

  • Моя полка

Контакты

  • chitat.ebooker@gmail.com

Подпишитесь на рассылку: