При рисовании на холсте должны ли расчеты производиться относительно декартовых координат плоскости?

В последнее время я видел много javascript-проектов и библиотек, связанных с холст-графикой, и мне было интересно, как они обрабатывают систему координат. При рисовании фигур и векторов на холсте точки рассчитываются на основе декартовой плоскости и преобразуются для холста или все рассчитывается непосредственно для холста?

Я попытался поиграть с рисованием круга, изобразив все его касательные линии до тех пор, пока пересечения линий не начнут напоминать кривую, и обнаружил, что разница между декартовыми плоскостями, с которыми я знаком, и системой координат, используемой веб-браузерами, очень сбивает с толку. Функция для круга, например, «y^2 + x^2 = r^2», должна быть переведена в «(y-1)^2 + (x-1)^2 = r^2», чтобы увидеть на холсте. И тогда отрицательные наклоны были положительными наклонами на холсте, и все было бы вверх ногами :/ .

Самый простой способ подумать об этом — представить начало декартовой плоскости в центре холста и соответствующим образом скорректировать свои координаты. На холсте 500 x 500 центр будет 250 250, поэтому, если я закончу с точкой 50, 50, она будет нарисована в (250 + 50, 250 - 50) = (300, 200).

У меня такое чувство, что я слишком усложняю это, но я не могу понять чистый способ работы с холстом.


canvas html html5-canvas math
person mowwwalker    schedule 13.03.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Текущая практика может быть проиллюстрирована цитатой из книги Дэвида Фланагана «JavaScript: полное руководство», в которой говорится, что

Некоторые операции и атрибуты холста (например, извлечение необработанных значений пикселей и настройка смещения теней) всегда используют эту систему координат по умолчанию.

(система координат по умолчанию — система координат холста). И продолжается с

В большинстве операций с холстом, когда вы указываете координаты точки, она считается точкой в ​​текущей системе координат [это, например, упомянутая вами декартова плоскость, @Walkerneo], а не в система координат по умолчанию.

Почему использование «текущей системы координат» более полезно, чем непосредственное использование холста c.s. ?

В первую очередь, я считаю, потому что он независим от самого холста, который привязан к экрану (точнее, размеры системы координат по умолчанию выражены в пикселях). Использование, например, декартовой (ортогональной) системы координат позволяет вам (ну, очевидно, и мне тоже :-D) определить свой рисунок с точки зрения того, что вы хотите нарисовать, оставив задачу, как нарисовать это, на преобразования, предлагаемые Canvas API. В частности, вы можете выразить размеры в натуральных единицах вашего рисунка, а также выполнить масштабирование и перевод, чтобы подогнать (или не подогнать, в зависимости от обстоятельств...) ваш рисунок на холсте.

Кроме того, использование преобразований часто является более ясным способом построения вашего чертежа, поскольку позволяет вам уйти «дальше» от лежащей в основе системы координат и определить ваш рисунок с точки зрения операций более высокого уровня («масштабирование», «поворот», «перемещение» и т. д.). более общее «преобразование»). Вышеупомянутая книга дает очень хороший пример силы этого подхода, рисуя снежинку Коха (фрактальную) с гораздо меньшим количеством линий, что было бы возможно (если вообще возможно) с использованием координат холста.

person lmsteffan    schedule 13.03.2013
comment
ДА! Спасибо, это именно тот ответ, который я искал. Я не был уверен, должна ли математика каким-то образом быть агностической по отношению к системам координат, и не был ли я придирчив, пытаясь заставить все работать так, как я привык. - person mowwwalker; 13.03.2013

arrow_upward
0
arrow_downward

Холст HTML5, как и большинство графических систем, использует систему координат, где (0,0) находится в левом верхнем углу, а оси x и y идут слева направо и сверху вниз соответственно. Это имеет смысл, если вы думаете о том, как бы вы создали графическую систему только с блоком памяти: самый простой способ сопоставить координаты (x, y) со слотом памяти — это взять x+w*y, где w — ширина линии. .

Это означает, что система координат холста отличается от той, которую вы используете в математике, двумя способами: (0,0) не является центром, как обычно, и y растет вниз, а не вверх. Последняя часть — это то, что делает ваши фигуры перевернутыми.

Вы можете установить преобразования на холсте, которые сделают координату система больше похожа на то, к чему вы привыкли:

var ctx = document.getElementById('canvas').getContext('2d');
ctx.translate(250,250);   // Move (0,0) to (250, 250)
ctx.scale(1,-1);          // Make y grow up rather than down
person Joni    schedule 13.03.2013
comment
Я лучше приспособлюсь к тому, что принято, чем буду пытаться приспособить вещи к тому, к чему я привык. Я пытаюсь выяснить, какова текущая практика с холстами. - person mowwwalker; 13.03.2013
comment
Текущая практика заключается в том, чтобы заставить ваши инструменты работать за вас. Если вам помогают преобразования системы координат, используйте их. Если вам удобнее система координат по умолчанию, не используйте преобразования. - person Joni; 13.03.2013