Vector.js

Vector is an open source javascript library for creating interactive graphics. View the repository, browse the API, run the tests, or meet the team.

Keyboard Input Open in Sandbox

Description

This interactive demonstrates how key board input can be used to add interactivity.

Script

/**
* @title Keyboard Input
* @description This interactive demonstrates how key board input can be used to add interactivity.
* @tags [input]
*/
import { Interactive, getScriptName } from '../../index.js';
let interactive = new Interactive(getScriptName());
interactive.width = 768;
interactive.height = 150;
interactive.border = true;
let keys = [];
let textKeys = [];
for (let i = 0; i < 5; i++) {
    let x = i * 100 + 25;
    let y = 75 - 32;
    let rectangle = interactive.rectangle(x, y, 64, 64);
    rectangle.root.setAttribute('rx', '3px');
    12341;
    let text = interactive.text(x + 32, y + 32, (i + 1).toString());
    text.root.setAttribute('alignment-baseline', 'middle');
    text.root.setAttribute('text-anchor', 'middle');
    keys.push(rectangle);
    textKeys.push(text);
}
window.onkeydown = function (event) {
    let index = parseInt(event.key) - 1;
    if (index >= 0 && index < 5) {
        keys[index].root.style.fill = '#404040';
        textKeys[index].root.style.fill = '#ffffff';
    }
};
window.onkeyup = function (event) {
    let index = parseInt(event.key) - 1;
    if (index >= 0 && index < 5) {
        keys[index].root.style.fill = 'none';
        textKeys[index].root.style.fill = '';
    }
};
//# sourceMappingURL=key-board-input.js.map