Добавьте другое изображение поверх нарисованного изображения на холсте, а затем отреагируйте на событие onclick. Возможно ли это?

Question

Вот приложение Canvas, с которым я сталкиваюсь: canvasphoto (я полагаю, использует YUI 2, чего раньше не использовал). Он отображает изображения на холсте и позволяет изменять размер / перемещать изображения по холсту. Что я хочу сделать, это добавить кнопку закрытия в верхней правой части изображений, нарисованных на холсте, и заставить ее вызывать событие onclick при нажатии (я бы отобразил кнопку подтверждения, спрашивающую пользователя, хочет ли он или она удалить изображение).

Возможно ли это? Если да, можете ли вы помочь мне начать работу с этим (ресурс / ссылка для рисования изображения поверх другого изображения, нарисованного на холсте, базовые манипуляции с холстом и т. Д.) Спасибо!

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

Answer 1

Вместо того, чтобы рисовать на пробковой доске, на странице над отображается верхний правый угол изображения вместо изображения с изображением, устанавливая более высокий z-индекс, чем у холста, и абсолютную позицию (с координаты верхнего правого угла, конечно).

Answer 2

Невозможно, чтобы что-то нарисованное в canvas отвечало на события без дополнительной работы. Либо вы можете сохранить положение поля закрытия и иметь событие onclick на холсте, чтобы проверить, происходит ли щелчок внутри прямоугольника, либо вы можете поместить элемент поверх холста, где был нарисован прямоугольник, и использовать его для обработки щелчка. Относительно позиционированный div без содержимого будет работать.