Холст HTML5 hittesting
У меня есть некоторые изображения, продвинутые Холст HTML5, и я хочу проверить, поражены ли они по щелчку мышью. Кажется легким, у меня есть границы изображений, однако изображения преобразовываются (переведенный и масштабированный). К сожалению, контекст не имеет метода для получения текущей матрицы преобразования, и также, нет никакого API для умножения матриц. Кажется, что единственное решение состоит в том, чтобы отслеживать преобразования самостоятельно и реализовать умножение матриц. Предложения одобрены.
1 ответ
Это также обычная проблема в мире 3D-графики (OpenGL).
Решение состоит в том, чтобы создать вспомогательный объект холста (который не отображается) и перерисовать в нем ваше изображение. Рисование точно такое же, как и при рисовании основного холста, за исключением того, что каждый элемент отрисовывается уникальным цветом.Затем вы смотрите на пиксель, соответствующий выбранному вами указателю мыши, и считываете его цвет, который дает вам соответствующий элемент (если есть).
Это широко используемый метод в мире OpenGL. Вы можете найти его описание в запросах Google, например «выбор объекта opengl» . Вот один из многих результатов поиска .
Обновление: Спецификация холста HTML5 теперь включает областей попадания . Я пока не уверен, в какой степени они поддерживаются браузерами.