canvasに描画されたオブジェクトにイベントリスナを設定する

「canvas上の円をクリックしたら色を変えたい！」「canvasでゲームを作りたい！」そういう時、canvasに対してイベントリスナを設定したくなります。しかし、円をクリックしたかどうかの判定を書くのは煩雑で面倒な作業です。

本記事ではUnitaryJSを用いて、canvas上のオブジェクトにイベントリスナを設定する方法を紹介します。

準備

github.com

ここからUnitaryJSをダウンロードする、もしくはnpm install unitaryjsとしてUnitaryJSを使いたい場所にインストールしてください。

コード

まず、canvas自身とcanvasに描画するオブジェクトを作ります。

<canvas id="canvas"></canvas>

window.addEventListener('load', function() {
    var canvas = new Canvas('canvas');
    var triangle = new Unitary.Triangle(new Unitary.Point(0, 0), new Unitary.Point(0, 30), new Unitary.Point(30, 0));
});

そしたらcanvasに対しイベントを検出する準備をします。ただし、この手順はcanvasが自身に起きたイベントをオブジェクトに対して伝播するためのものです。canvas自身に具体的なリスナは設定しません。

    canvas.listen('click');

いよいよ、オブジェクトにイベントリスナを貼ります。注意してほしいのは、onを呼び出しても、自身にリスナを貼らないことです。onはリスナが設定された新しいオブジェクトを返します。だから、再代入を行わないと何も起こりません。

    triangle = triangle.on('click', function() {
        alert('clicked!');
    });

最後にcanvasに描画します。

    canvas.add(triangle);
    canvas.draw();

まとめるとこういうコードになります。

window.addEventListener('load', function() {
    var canvas = new Canvas('canvas');
    var triangle = new Unitary.Triangle(new Unitary.Point(0, 0), new Unitary.Point(0, 30), new Unitary.Point(30, 0));

    canvas.listen('click');
    triangle = triangle.on('click', function() {
        alert('clicked!');
    });

    canvas.add(triangle);
    canvas.draw();
});

イベントはバブリングする

オブジェクトが重なっている場合、一番上のオブジェクトから下に向かってイベントが伝播します。途中で止めたい場合はe.stopPropagation();を呼び出してください。

obj.on('click', function(e) {
    e.stopPropagation();
});