1

HTML5キャンバスに表示されている画像がありonmouseover、同じファイルに書き込まれたJavaScript関数を理論的に呼び出す必要があるイベントを追加しました。

ただし、ページを表示してカーソルを画像に合わせると、何も起こりません。

次の行を使用して、HTMLの非表示セクションに画像を追加しました。

<img id="assetBox" src = "images/box.png" alt="Assets" onmouseover = "displayAssetDescriptionTip()"/>

次に、次の関数を使用して画像がキャンバスに描画されます。

function drawDescriptionBoxes(){
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");
assetsDescriptionBox.src = 'images/box.png';
liabilitiesDescriptionBox.src = 'images/box.png';
incomeDescriptionBox.src = 'images/box.png';
expenditureDescriptionBox.src = 'images/box.png';

context.drawImage(assetsDescriptionBox, 70, 400, 120, 70);
context.drawImage(liabilitiesDescriptionBox, 300, 400, 120, 70);
context.drawImage(incomeDescriptionBox, 530, 400, 120, 70);
context.drawImage(expenditureDescriptionBox, 760, 400, 120, 70);

context.strokeText("Assets", 100, 490);
context.strokeText("Liabilities", 325, 490);
context.strokeText("Income", 550, 490);
context.strokeText("Expenditure", 775, 490);


}

カーソルが画像の上にカーソルを置いていることが検出されたときに呼び出される関数は次のとおりです。

function displayAssetDescriptionTip(){
        document.getElementById('tipsParagraph').innerHTML = "Assets are items that can be bought or sold for cash.";
        console.log("displayAssetDescriptionTip being called");
}

しかし、何らかの理由で、ブラウザで自分のページを表示し、キャンバス上の画像にカーソルを合わせると、何も起こらず、コンソールに何も表示されません...これは私のonmouseoverイベントが発生していないことを意味していると思います発砲しますが、なぜこれなのかわかりません-誰かが私にそれを説明し、それを正しくするために私が何をする必要があるかを指摘できますか？

2013年2月22日14時40分編集

次のJSを追加して、私が持っている個別のJSファイルの1つでマウス座標を追跡してみました。

/*Add code to keep track of the mouse coordinates */
var boundingBox = canvas.getBoundingClientRect();
var mousex = (mouse_event.clientX-boundingBox.left)*(canvas.width/boundingBox.width);
var mouseY = (mouse_event.clientY-boundingBox.top)*(canvas.height/boundingBox.height);

座標を実際にどう処理するかをスクリプトに指示するコードを作成する必要があることはわかっていますが、自分で座標を使用して作業を行ってからしばらく経っているので、最初にこれを試してみたかっただけです。しかし、ブラウザでページを表示すると、「キャンバスが定義されておらず、次の行について文句を言う」というコンソールエラーが発生します。

var boundingBox = canvas.getBoundingClientRect();

これは別のスクリプトファイルであり、追加したばかりの場所まで、使用しているキャンバスへの参照が実際にはないためかどうか疑問に思います。このスクリプトが実行されているHTMLページですでに定義されている場合でも、再度定義する必要がありますか？

4

2 に答える 2

0

これは仮定ですが、描画される画像は、onmouseover がオンになっている要素とは別の要素です。画像と描画中の画像にクラスを追加して、クラスに onmouseover を設定してみてください (このプロセスを簡単にするために jQuery を確認してください)。

于 2013-02-20T16:01:27.233 に答える
0

画像を描画するだけでは、魔法のように画像がノードのように動作するわけではありません。たとえば、その変更はできずsrc、キャンバスに表示される画像が自動的に変更されます。

代わりに、キャンバス上でマウスの動きを手動で追跡しonmousemove、マウスが何の上にあるかを計算し、それについて何かをする必要があります。ゲーム・メーカーでメニューを作った経験がある私にはわかりますが、それは非常に難しいことです。

于 2013-02-20T16:01:17.030 に答える