javascript - HTML5キャンバス、drawImageの後、画像の特定の領域をクリックする方法は?

Question

HTML5 キャンバスとライブラリ canvasengine を使用して 2D アイソメ マップを作成しています。

だから、私はタイルを持っています:

この画像は正方形です。

いくつかのオプションを使用して、キャンバスにこの画像を描画します。

_tile.drawImage(tileset.name, x, y, this.tile_w, this.tile_h, posx, posy, this.tile_w, this.tile_h);

その後、onclickこれにイベントを追加する必要があります_tileが、緑色の部分にのみ:

_tile.on("click", function(e) {
    this.opacity = this.opacity < 1 ? 1 : 0.5 ;
});

この機能を使用すると、白い部分かどうかに関係なく、すべての写真をクリックできます。マップを生成するためにタイルを積み重ねる必要があったため、画像の端をクリックすると、次のタイルが選択されます...

次のようなことをする必要があります_tile.drawImage():

_tile_diamond.onclick

何か案は ？ありがとう ！

Answer 1

特定の画像ではなく、キャンバス全体の onClick イベントをバインドできます。したがって、画像のみの onClick が必要な場合は、開始座標と終了座標を変数に保存し、クリックのマウス座標を確認する必要があります。これは複雑です

キャンバス上でこれらすべてを行う単純なものにしたい場合は、kinetic.jsを使用します。