HTML5 холст тестирование

Question

У меня есть несколько изображений, нарисованных на холсте HTML5, и я хочу проверить, ударили ли они по щелчку мыши. Кажется легко, у меня есть границы изображений, однако изображения преобразуются (переводятся и масштабируются). К сожалению, в контексте нет метода для получения текущей матрицы преобразования, а также нет API для умножения матриц. Кажется, единственное решение состоит в том, чтобы самостоятельно отслеживать преобразования и реализовывать умножение матриц. Предложения приветствуются.

Answer 1

Это распространенная проблема и в мире 3D (OpenGL) графики.

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

Это широко используемый метод в мире OpenGL.Вы можете найти его описание в терминах Google, таких как "выбор объекта opengl" .Вот один из многих результатов поиска .

Обновление: Спецификация холста HTML5 теперь включает области попадания .Я не уверен, в какой степени они поддерживаются браузерами.