Category: método

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.

Interfaz del programa Kmines

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.