2010-12-02 9 views
2

キャンバスタグ内にイメージを描画しました。どのようにイベントを追加できますか?ユーザーがその画像をクリックしたときに何かしたい。キャンバス内の要素のイベント

character.addEventListener('click', function() { alert('foo'); }, true); 
/* character is a var (image object) within a canvas */ 

ありがとうございます。

+1

のソースを参照してくださいがありますFabric.jsのようなキャンバスライブラリーでは、基本的な形状のクリック検出を処理します。例: 'canvas.add(myImg); myImg.on( 'click'、function(){console.log( '画像がクリックされました')}) ' – kangax

答えて

2

キャンバス上の実際の図面にイベントハンドラを追加する方法はありません。キャンバス全体のイベントを処理できます - それだけです。

この時点での選択肢は、キャンバス上に抽象化を追加し、キャンバスクリックイベントの座標に基づいてそこにある図面を検索することです。キャンバスを完全にドロップします。 svg。 Raphaëlライブラリ(http://raphaeljs.com/)は後者を手伝うことができます。さらに、より

2

get click event of each rectangle inside canvas?

、私はこの答えはMozillaで動作しないことを発見しました。

代わりに、offsetXの代わりにclientXを使用してください。 https://github.com/michaelBenin/fi-test

ウィンドウのサイズが変更されるたびに、私は、各画像の描画され、X、Yを再計算し、そこから私は衝突を機能実行を:

例は、私がでgithubの上に動的キャンバス画像ギャラリーを作成していますキャンバスをクリックします。

基本的に、clickイベントからx、y値を取得し、キャンバス上にそれらの座標に何かがあるかどうかを確認します。ここで

は、キャンバスの内側にクリックイベントを登録するに別の良いリンクです:http://eli.thegreenplace.net/2010/02/13/finding-out-the-mouse-click-position-on-a-canvas-with-javascript/