8

マウスオーバーまたはそのためのイベントをキャンバス上の描画オブジェクトにバインドするにはどうすればよいですか? たとえば、私はこれを試しました：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();

//STEP ONE
var stepOneRec = ctx.rect(20, 60, 266, 50);
ctx.stroke();
stepOneRec.addEventListener("mouseover", function() { alert('it works!'); });

私が見たあるサイトでは、Kinetic.js を使用した方法が示されていました。それが唯一の方法である場合は、それを使用します。追加のプラグインを使用せずに、描画された要素にイベントをバインドする方法があると仮定します。申し訳ありませんキャンバス初心者。ここで自分のコードをいじりました: http://jsfiddle.net/jyBSZ/2/

4

3 に答える 3

7

(私はこれを投稿されたコメントとして開始し、それが実際の回答であることに気付きました。)

残念ながら、javascript だけではできません。キャンバス オブジェクトはなく、キャンバス全体と、そのコンテキストに描画したものは何でもあります。kinetic のようなプラグインはオブジェクトを作成できますが、canvas の要点は、ブラウザーがそれを単一の静止画像と見なすことができるということです。

必要に応じて、mousemove イベントをキャンバスにバインドし、その位置と描画した位置を追跡し、それが「そのオブジェクト」の上にあることを独自に暗示することができます (事実上、プラグインが行うこと)。ただし、それはすべて mousemove イベントですそのコンポーネントのマウスオーバーイベントではなく、単一のキャンバスで。(イベントバインディングで「オブジェクト」のマウスオーバーイベントをシミュレートすることもできますが、その下では、動きのチェックと独自のオブジェクト設定のチェックに基づいています。)

于 2013-09-27T16:09:47.667 に答える
3

canvas 要素内に描画されるオブジェクトは HTML 要素ではなく単なるピクセルであるため、HTML 要素のように DOM イベントをスローしません。

オブジェクトの位置を自分で追跡し、キャンバスのonmousemoveイベントを処理して、マウスが描画されたオブジェクトの 1 つの上にあることを判断する必要があります。

于 2013-09-27T16:10:22.623 に答える