HTML5 Canvas (инвертированная) система координат

Question

Я новичок в Canvas и удивляюсь:

1. обоснование использования перевернутой декартовой системы координат.
2. Скажем, мне нужно отобразить некоторые значения в гистограмме.Это простой способ повернуть / отобразить рамку холста в декартовой системе координат .?

Answer 1

Полотна перевернуты, потому что они интуитивно понятны для многих интерфейсов. Веб-страницы больше похожи на лист бумаги, чем на декартовый график, потому что вы начинаете слева вверху и читаете вниз. Таким образом, HTML выложен так. Я предполагаю, что элемент canvas использует ту же систему координат для согласованности.

Вы можете перевернуть его, масштабируя ось Y на -1. Возможно, вам также придется ее трансформировать, я не уверен в этом, но есть комментарий к вашему вопросу, который должен помочь с этим. Функции преобразования в HTML почти такие же, как и в этом посте.

Я часто использую черновик стандарта html5 для справки. Вот некоторый контент из контекстной секции canvas 2d :

void scale(in double x, in double y);
void rotate(in double angle);
void translate(in double x, in double y);
void transform(in double a, in double b, in double c, in double d, in double e, in double f);
void setTransform(in double a, in double b, in double c, in double d, in double e, in double f);

Answer 2

С Как рисовать на JPanel, используя другой квадрант для координат?

Перевести на (0, высота). Это должно изменить положение источника внизу слева.

Масштабирование по (1, -1). Это должно перевернуть его вокруг оси X.

Answer 3

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

Однако причина, по которой холст HTML (и SVG и многие другие системы координат, связанные с отображением экрана) помещают оригами в верхний левый угол, заключается просто в том, что экраны ЭЛТ (которые долгое время были доминирующей технологией компьютерного дисплея) отображали компьютер отображение, позволяя электронному лучу проходить по экрану, строка за строкой, пока не отобразится весь экран. Для всех ЭЛТ, о которых я слышал, линии сканирования были горизонтальными и отображались слева направо. Кроме того, сначала отображалась самая верхняя строка сканирования, поэтому в верхнем левом углу начинались все обновления экрана. Принятие этого угла в исходное положение с увеличением X вниз и увеличением Y вправо упростило вычисления для отображения координат экрана на позиции видеопамяти (а упрощенные вычисления означали упрощенное аппаратное обеспечение в первые дни компьютерных контроллеров дисплея). AFAIK, телевизионные экраны сканируют свои дисплеи также, начиная с верхнего левого угла.

(Аркадные игры были немного изобретательны в этом отношении, довольно многие из них взяли «нормальный» компьютерный ЭЛТ, а затем повернули его на 90 градусов, чтобы получить экран, который лучше подходил для макета видеоигры. В этих играх обновление экрана не начиналось в верхнем левом углу, по понятным причинам.)

Это соглашение о том, чтобы помещать origo вверху слева и позволять X увеличиваться вниз, а Y вправо застревало с тех ранних дней и, похоже, используется во всех видах компьютерной графики.

Но я согласен, математические графики X / Y ориентированы иначе, особенно с положительным X вверх.

Как говорит @franticfantom, вы можете использовать функции преобразования API-интерфейса HTML Canvas, чтобы сделать шкалу -1 в направлении Y, чтобы отразить график вверх дном, а затем использовать перевод для перемещения оригами из верхнего левого угла в верхний левый. где угодно Имейте в виду, что такое преобразование масштаба -1 будет отражать все, поэтому простое применение к любому тексту, который вы используете в своих графиках, приведет к зеркальному или перевернутому тексту. Необходимо предпринять определенные меры для «отмены» любого текста на месте.