html5, agregando un eventlistener a una imagen dibujada en lienzo

Question

Estoy experimentando con html5 y tengo una pequeña imagen desplegable, el usuario selecciona e imagen y la dibuja en el lienzo usando drawImage();

Parece que no puedo encontrar la manera de agregar un detector de eventos a la imagen recién dibujada en el lienzo.

He intentado poner en una variable de este modo:

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

y luego añadir una EventListener de eso, pero no parece funcionar.

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

¿Cuál es la forma correcta de hacerlo?

Answer 1

La lona no es una superficie de dibujo . Es solo una imagen plana; no hay ningún objeto dentro para vincular eventos, y drawImage no devuelve nada.

Deberá detectar los clics en <canvas> y comprobar si se encuentran dentro del rectángulo [200, 200, 200 + w, 200 + h] manualmente. O bien, si desea un dibujo en modo retenido, considere usar SVG en lugar de un lienzo.

Answer 2

Si está buscando este tipo de interactividad, probablemente <canvas> no es lo que quiere. Usted está buscando SVG. Hay una fantástica biblioteca llamada Raphaël que hace que trabajar con SVG sea pan comido en todos los navegadores, incluso en IE6. Es también totalmente compatible con jQuery, por lo que puede hacer:

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

estoy bastante seguro de que esto va a tratar mejor y más fácil de usar que <canvas>.

Nota: Raphaël viene con algunos ayudantes para eventos básicos como el "clic" y "mousedown", acaba de hacer img.click(onImgClick), pero si usted ya está usando una biblioteca como jQuery, que es probable que se encuentre, lo recomiendo ser consistente y usar el manejo de eventos de la biblioteca.

Answer 3

Para hacer esto sin la ayuda de JS:

Aunque no se puede conectar un detector de eventos para el contexto en el que se llama a drawImage(); PUEDE adjuntar oyentes de eventos al propio Canvas.

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

Si es necesario tener presente que cada imagen se dibuja, es probable que podría apilar los objetos de lona y crear uno nuevo para cada imagen que dibuja.