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