html5, добавление обработчика событий к нарисованному изображению на холсте

Question

Я экспериментирую с html5, и у меня есть небольшое выпадающее изображение, пользователь выбирает и изображение, и оно рисует его на холсте, используя drawImage ();

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

Я попытался поместить его в переменную следующим образом:

var newImg = ctx.drawImage(myImage, 200, 200);

, а затем добавить к нему EventListener, но это не так.Кажется, что он работает.

newImg.addEventListener('mousedown', onImgClick, false);

Как правильно это сделать.

Answer 1

Если вы ищете такую ​​интерактивность, <canvas>, вероятно, не то, что вы хотите. Вы ищете SVG . Существует фантастическая библиотека под названием Raphaël , которая делает работу с SVG легкой задачей во всех браузерах, даже в IE6. Он также полностью совместим с jQuery , поэтому вы можете сделать:

var paper = Raphael(10, 50, 320, 200);
var img = paper.image("/path/to/img.png", 10, 10, 80, 80);
$(img).click(onImgClick);

Я почти уверен, что это поможет вам лучше и будет проще в использовании, чем <canvas>.

Примечание: Raphaël поставляется с некоторыми помощниками для основных событий, таких как "щелчок" и "mousedown", просто выполните img.click(onImgClick), но если вы уже используете библиотеку, такую ​​как jQuery, которой вы, вероятно, являетесь, я рекомендую быть последовательным и использовать обработку событий библиотеки.

Answer 2

Canvas не является сохраняемым режимом поверхности рисования. Это просто плоское изображение; внутри него нет объекта, к которому можно привязать события, и drawImage ничего не возвращает.

Вам нужно будет обнаружить щелчки на <canvas> и проверить, находятся ли они внутри прямоугольника [200, 200, 200 + w, 200 + h] вручную. Или, если вы хотите рисовать в режиме сохранения, рассмотрите возможность использования SVG вместо холста.

Answer 3

Для этого без помощи JS:

Хотя вы не можете прикрепить прослушиватель событий к контексту, в котором вы вызываете drawImage (); вы МОЖЕТЕ присоединить слушателей событий к самому Canvas.

myCanvasElement = document.getElementById('canvasElement');
myCanvasElement.addEventListener("click", someFunction, false);

Если вам нужно иметь это изображение, которое вы рисуете, вы, вероятно, можете сложить объекты холста и создать новый для каждого изображения, которое вы рисуете.