Varias personas han estado buscando como usar el método find de canvas-event, por lo que dejo un ejemplo de su uso mientras termino la documentación.
Usando el método find, es posible seleccionar un grupo de objetos y aplicarles un método o manejador de evento. para esto debemos usar un selector como:
- tipo: Corresponde con el nombre del método usado para crear el objeto (circle, rect, line…).
- id: Un nombre que podemos dar a un objeto con el fin de diferenciarlo de otros del mismo tipo.
Imagine estar creando un buscaminas, el campo esta lleno con varios rectángulos: unos son minas y otros no. Todos los rectángulos tienen el mismo color, pero solo los rectángulos mina explotan y terminan el juego, mientras los demás aumentan el puntaje del jugador.
Nota Al igual que en css, el símbolo # indica que mina y safe son id.
for (var i = 0; i < 5; i++) {
ce.rect(i*10, 0, 10).setId("mina");
}
for (var i = 0; i < 5; i++) {
ce.rect(i*10; 10; 10).setId("safe");
}
// selector tipo: todos los rectángulos, tanto #mina como #safe
ce.find("rect").attr("fill", "gray");
// selector id: solo rectángulos #mina
ce.find("#mina").click(function(c, e) {
alert("Boom!");
alert("Game Over");
});
// selector id: solo rectángulos #safe
ce.find("#safe").click(function(c, e) {
puntos += 1;
});
Por otro lado el método getAll (solo en repo de github) retorna un array con los objetos que coinciden con el selector:
// encontrar y retornar los objetos rect dibujados hasta el momento
var rects = ce.findAll("rect");
// rects ahora es igual a [Rect, Rect, Rect...]
// obtener el primer circulo dibujado
var first_circle = ce.getAll("circle")[0];
Si tienen dudas o sugerencia pueden dejarlas en los comentarios, prometo tenerlas en cuenta.
