4

ユーザーがキャンバスにレンダリングされた特定の要素をクリックしたかどうかを判断するためのトリックはありますか？たとえば、背景が透明な.pngファイルのひし形を表示していて、ユーザーがその図の内側または外側をクリックしたかどうかを知りたい（マウスと要素の衝突など）。

4

3 に答える 3

2

キャンバスには個々の要素という概念はありません。キャンバスは単にピクセルを描画する領域です。一方、SVG は、イベントをバインドできる要素で構成されています。ただし、キャンバスにクリック イベントを追加するには、いくつかの方法があります。

  1. クリック可能にするキャンバス上の領域をオーバーレイする html 要素を配置します。長方形の領域の場合は 、より不規則なものの場合はイメージ マップ。

  2. クリック可能にする要素ごとに個別のキャンバスを使用します。

  3. CAKE - 私はこれを自分で使用したことはありませんが、その説明は「SVG sans the XML」です。これはあなたのニーズをカバーするかもしれません。デモはこちらhttp://glimr.rubyforge.org/cake/canvas.html#EditableCurve

于 2010-07-09T16:40:52.377 に答える
0

1 つのアイデアは、画像を一時的なキャンバスに描画し、getImageDate() を使用して関心のあるピクセルのデータを受け取り、そのアルファ値が 0 (= 透明) かどうかを確認することです。

以下は解決策のスケッチです。それは...

  1. x と y は、マウス クリック イベントの座標です。
  2. あなたはgameObjectsをループしており、現在のオブジェクトは変数gameObjectに格納されています
  3. ゲームオブジェクトは画像、x および y 座標で初期化されています

次のコードは、クリックが透明な領域で行われたかどうかを確認します。

var tempCanvas = document.createElement('canvas');
if (tempCanvas.getContext) {
  tempContext = tempCanvas.getContext('2d');
}
tempContext.drawImage(gameObject.img, 0, 0);
var imgd = tempContext.getImageData(x - gameObject.x, y - gameObject.y, 1, 1);
var pix = imgd.data;
if (pix[3] == 0) {
  // user clicked on transparent part of the image!
}

注: これはおそらく非常に非効率的です。誰かがより良い解決策を思い付くことができると確信しています。

于 2012-03-28T20:17:29.677 に答える
0

私は kintech.js を使用してこの問題を解決しました。チュートリアルと例を見つけることができます: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

于 2013-02-08T08:55:55.183 に答える