Хобрук: Ваш путь к мастерству в программировании

Сделать координаты мыши относительно координат ‹холста›

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

Проблема в том, что «масштабирование» между WebGL (которое я использую для рисования на холсте) и координатами мыши отличается. То, что WebGL считает 10 единицами вправо от начала координат, на самом деле считается x числом единиц от начала координат (различное разрешение экрана меняет это). Это означает, что когда моя мышь находится над тем, что считает WebGL (10, 10), мои координаты мыши будут (100, 100).

Как преобразовать координаты мыши на экране в "координаты WebGL", которые используются для определения точки?

Это похоже на этот вопрос, но я хотел бы сделать без использования Fabric.js.

javascript canvas html webgl
14.06.2016

  • Добавлен тег webgl ref. Комментарии 15.06.2016
  • Пространство NDC по умолчанию (без каких-либо преобразований): x=-1 в левой части экрана, x=+1 в правой; y=-1 внизу и y=+1 вверху экрана. 15.06.2016
  • Как мне преобразовать координаты курсора в окне просмотра в то, что он покрывает в пространстве NDC, это мой вопрос. 15.06.2016
  • См. это. 15.06.2016
  • Или просто используйте базовую математику: mx = (mouseEvent.offsetX / canvas.clientWidth)*2-1 то же самое для y, используя offsetY и clientHeight 15.06.2016
  • Спасибо за комментарии. Уравнение, которое вы мне дали, привело меня к решению. Если хотите, создайте ответ, чтобы я его принял! 15.06.2016
  • @StillLearning, вот, пожалуйста, обратите внимание, что вам нужно инвертировать координату Y. 15.06.2016

Ответы:


1

Чтобы преобразовать координаты мыши холста в относительные координаты в диапазоне от -1 до +1, сначала необходимо получить относительные координаты пикселей в пределах холста, используя offsetX/offsetY, предоставляемые событием мыши.

Затем разделите это значение на фактическую ширину и высоту холста, используя clientWidth/ clientHeight.

Имея относительные координаты в диапазоне от 0 до 1, теперь мы можем переместить их в нужный диапазон, умножив на 2 и вычитая 1.

Обратите внимание, что в WebGL ось вверх положительна 1, поэтому нужно инвертировать координату Y.

Все вместе:

var ndcX = (mouseEvent.offsetX / canvas.clientWidth) * 2 - 1;
var ndcY = (1 - (mouseEvent.offsetY / canvas.clientHeight)) * 2 - 1;
15.06.2016
  • Полный ответ сложнее, чем кажется, но в обычном случае ваше решение работает 15.06.2016
  • Небольшая опечатка в расчете ndcY. Вы должны делить на canvas.clientHeight вместо canvas.clientWidth. 06.10.2016

    • 2

    Если ваш прослушиватель событий находится на элементе холста, координаты уже должны быть на холсте. Значение mouse.x = 0 mouse.y = 0 будет в верхнем левом углу вашего холста.

    14.06.2016
  • Похоже, это может сработать. Позвольте мне провести еще немного испытаний, но, похоже, все в порядке. 15.06.2016
  • Это не сработало. 10 единиц ширины на холсте были больше, чем 20 единиц, о которых сообщил прослушиватель событий onmousmove, даже когда он находится на элементе холста. 15.06.2016
  • Поскольку mouse.x/y возвращает то же значение, что и event.clientX/Y, это означает, что координаты будут относиться к области просмотра, а не к элементу. x/y поддерживается не во всех браузерах. Ссылка: drafts.csswg.org/cssom-view/#dom-mouseevent- х 15.06.2016
    • Новые материалы
    Введение в контекст React
    В этом посте мы поговорим о Context API, который был представлен в React 16, и о том, как вы можете их использовать. Что такое контекст? Глядя на определение из react docs , оно..
    Шлюз с лицензией OSS, совместимый с Apollo Federation v2, появится в WunderGraph
    Сегодня мы рады сообщить, что мы сотрудничаем с поддерживаемой YC Tailor Technologies, Inc. для внедрения Apollo Federation v2. Реализация будет лицензирована MIT (Engine) и Apache 2.0..
    Это оно
    Ну, я официально уволился с работы! На этой неделе я буду лихорадочно выполнять последние требования Думающего , чтобы я мог сосредоточиться на поиске работы. Что именно это значит?..
    7 полезных библиотек JavaScript, которые вы должны использовать в своем следующем проекте
    Усильте свою разработку JavaScript Есть поговорка «Не нужно изобретать велосипед». Библиотеки — лучший тому пример. Это поможет вам написать сложные и трудоемкие функции простым способом...
    Базовое руководство по переносу концепций обучения в глубокое обучение
    Обзор По мере того, как машинное обучение становится все более мощным и продвинутым, модели, обеспечивающие эту расширенную возможность, становятся все больше и начинают требовать огромного..
    C в C.R.U.D с использованием React-Redux
    Если вы использовали React, возможно, вы знакомы с головной болью, связанной с обратным потоком данных. Передача состояния реквизитам от родительских компонентов к дочерним компонентам может..
    5 обязательных элементов современного инструмента конвейера данных
    В цифровом мире предприятия используют конвейеры данных для перемещения, преобразования и хранения огромных объемов данных. Эти конвейеры составляют основу бизнес-аналитики и играют..