Eventos del teclado¶

Uno de los inconvenientes a la hora de usar eventos del teclado es identificar la tecla presionada, con canvas-event este problema no existe, ya que estos se asocian con una tecla o combinación de teclas.

ce.keydown("f1", function(c, e) {
    alert("Lo siento, no hay ayuda disponible");
});

ce.keydown("ctrl+g", function(){
    alert("El documento ha sido guardado");
});

Nota: Los eventos del teclado solo se disparan cuando el elemento canvas tiene el foco.

Las teclas soportadas son:

• Letras y numeros
• left, right, up, down
• Teclas de funcion f1, f2... f12
• -, /, *, +, ., /, `, ~, !, @, #, $, %, ^, &, (, ), _, =, ‘, <, >, ?, ”, | y ,
• space, esc, tab, return, backspace, scroll, capslock, numlock, pause, insert, home, del, end, pageup, pagedown
• ctrl, alt, shift

Si se usan modificadores estos deben estar en orden alfabético:

// Correcto
ce.keydown("ctrl+shift+g", function(c, e) {
    alert("Guardar como");
});

// Esto no se ejecutará
ce.keydown("shift+ctrl+g", function(c, e) {
    alert("Guardar como");
});

A diferencia de los eventos del ratón, this hace referencia a la instancia de canvas-event y no a un objeto en particular.

ovalo = ce.ellipse(50, 50, 20, 40).draw().get(-1);

ce.mousedown(function(c, e) {
    // this es el objeto afectado por el evento
    console.log(this === ovalo);
});

ce.keydown("a", function(c, e) {
    // this es la instancia de canvas-event
    console.log(this === ce);
});

ce.keydown("delete", function(c, e) {
    if ( this.focused ) {
        this.remove(this.focused);
    }
});