1

Tengo que realizar un diagrama en HTML5 canvas y para ellos realizo arreglos de rectángulos con strokeRect. Sin embargo, estos elementos deben tener eventos y detectar cuando se les da clic y cambiar de color, ¿Alguien me puede dar una pista sobre como puedo aplicar un evento onmouseclic sobre un arreglo completo de elementos canvas?

Les agradezco la atención.

1 respuesta 1

-1

Quizas este snippet te puede dar una guia.

window.onload = function(){

	var rect = document.getElementById('rect');
	var ctx  = rect.getContext('2d');
        ctx.fillStyle="#FF0000";
        ctx.fillRect(20,20,150,150);
  
        // Agregar evento al canvas
	rect.addEventListener('mousedown',onDown,false);
        
        // Evento a lanzar en 'mousedown'
	function onDown(event){
		cx = event.pageX;
		cy = event.pageY;
		alert("X,Y="+cx+','+cy);
	}

}
<canvas id="rect" height="170" width="170">

4
  • No es tan simple, eso solo serviría para capturar los eventos en el canvas, no obstante aun falta la implementación que maneje la detección de elementos, despachador de eventos, etc. Commented el 7 jul. 2017 a las 20:51
  • Pero eso solo me serviría para un elementos canvas, sin embargo, eso lo pude hacer el mi primer prueba. Ahora requiero hacerlo sobre todo un arreglo de elementos canvas (más bien son 4 arreglos). El problema es que no se me ocurre como hacer "el barrido" para que sepa que elemento es el que esta siendo clickeado del arreglo. Commented el 8 jul. 2017 a las 1:18
  • En ese caso, como los elementos dentro del canvas son dibujados, solo el evento click se puede atar al tag canvas, sin embargo, se puede obtener el elemento donde se hizo el click con las coordenadas del último click. Revisa esto: jsfiddle.net/BmeKr/1315 . Adicionalmente si deseas identificar al objeto clickado, usa tambien las coordenadas luego del click y valida si el par se encuentra dentro de algún área de tus objetos dentro del arreglo que manejas. Aqui la idea : stackoverflow.com/questions/28826523/…
    – Leo
    Commented el 8 jul. 2017 a las 1:41
  • Si veo que utilizan una especie de arreglo ahí pero no sé como aplicarlo a mi proyecto. Digamos que tengo una clase (CompGrafico) donde defino un componente gráfico el cual es un rectángulo que acorde a los parametros que se le pasen se dibujan textos, color, etc. La otra clase (Action), es la clase donde yo hago los llamados a CompGrafico y creo un arreglo de objetos de esta clase con distintas propiedades según requiera. Pero no veo en que clase meter el evento y como hacer que me lo detecte. Ya lo he intentado en Action que es donde defino los arreglos pero no funciona, ¿alguna idea? Commented el 9 jul. 2017 a las 19:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.