Crear eventos

[brown_charli95]

Buenas, estoy intentando crear un panel de dibujo con canvas y HTML5 en el que, por el momento, solo se pueden dibujar puntos. Para ello, he creado un constructor para el objeto punto() añadiendole propiedades como las coordenadas y un id; y metodos como dibujarlo, borrarlo, y mostrar sus datos.

El problema que tengo es que quiero poder seleccionarlos. Para ello, no se si deberia añadir un EventListener al objeto canvas para que compruebe si las coordenadas del "click" corresponden con las de algun punto existente, o a cada objeto punto añadirle una propiedad o metodo que lo detecte. En el segundo caso, ¿como deberia hacerlo?

[Panino5001]

No podés asignarle un evento a "zonas" dibujadas dentro del objeto canvas. Tal como mencionás la opción es asignarle el evento al objeto canvas y detectar las coordenadas o bien trabajar con más de un objeto canvas.

[brown_charli95]

Es lo que suponia, no puedo añadir un evento a los puntos porque no son mas que zonas pintadas. Para detectarlo a partir del objetos canvas deberia recorrer todos los objetos puntos y comparar las coordenadas con las del click, ¿no?

La otra opcion que propones, ¿como seria?

[Panino5001]

Para detectarlo a partir del objetos canvas deberia recorrer todos los objetos puntos y comparar las coordenadas con las del click, ¿no?

No necesariamente. Si diseñás bien no sería necesario hacer algo tan costoso. Un buen ejemplo es cómo detectan las colisiones aquí:
http://billmill.org/static/canvastutorial/

Con respecto a la segunda manera, hay una tendencia de cierta gente que hace juegos relacionada con el principio "divide y vencerás" que sugiere no trabajar con uno sino varios objetos canvas para dibujo y transformación, y moverlos como se hace normalmente con elementos de bloque (como siempre se venía haciendo con el desarrollo de juegos en dhtml clásico antes de que existiera canvas). No es algo muy difundido y no estoy demasiado de acuerdo porque sólo se trata de relegar al objeto canvas a la categoría de sprite, pero es algo para analizar y estudiar.

[brown_charli95]

He probado con esto, y funciona perfectamente:

Código Javascript:

function comprobarSelect(evento) {
//Extraigo las coordenadas del click del raton
  if (evento.layerX || evento.layerX == 0) {
 
   X = evento.layerX;
   Y = evento.layerY;
 
  } else if (evento.offsetX || evento.offsetX == 0) {
 
   X = evento.offsetX;
   Y = evento.offsetY;
 
  }
//verifico si la matriz contiene algun punto
  if (puntos.length > 0) {
//recorro cada uno de ellos
   for (i=0;i<puntos.length;i++) {
 
    puntoActual = puntos[i];
 
    if (X >= puntoActual.coorX && X <= puntoActual.coorX + puntoActual.width && Y >= puntoActual.coorY && Y <= puntoActual.coorY + puntoActual.height) {
 
     canvas1.removeEventListener("click",crearPunto);
     puntoActual.select();
     alert("Has seleccionado el punto " + puntoActual.indice);
     canvas1.addEventListener("click",crearPunto);
 
    }
 
   }
 
  } 
 
 }
 

¡Muchas gracias por la ayuda!