Можно ли обнаружить щелчки на разных частях элемента canvas?

Question

Предположим, внутри элемента canvas у меня есть холст и прямоугольник на холсте, и я хочу использовать щелчки на обоих элементах, чтобы делать разные вещи.Можно ли различить эти два клика?

Answer 1

Другим способом сделать это является использование теневого (т.е. не отображаемого) холста. На этом холсте вы рисуете маски форм из настоящего холста разных цветов.

Затем вы проверяете цвет пикселя на теневом холсте и можете определить, какой объект был нажат в «реальном».

Answer 2

Да, но я не думаю, что существует какая-либо существующая функциональность для этого. По сути, вы хотите отслеживать фигуры, которые вы нарисовали (как правило, отслеживая их координаты вершин), и прикреплять событие щелчка к тому холсту, о котором вы говорите. После того, как событие click запущено, найдите координаты мыши x и y относительно верхнего левого угла холста, а затем выполните итерацию по массиву фигур и проверьте их на пересечение. Реализация этого похожа на трассировку лучей, но сделать это намного проще, поскольку речь идет только о двух измерениях.

Проверьте эту статью на предмет информации о расчете точки в многоугольнике: http://en.wikipedia.org/wiki/Point_in_polygon

Answer 3

Событие, которое передается обратному вызову onClick, содержит элементы pageX и pageY, для которых установлено местоположение щелчка. Подробнее об этом сообщении в блоге .

Answer 4

Я сделал учебные пособия о том, как сделать объекты доступными для выбора на Canvas, если вы ищете, как начать работу.