0

多数の画像が表示される HTML5 キャンバスがあります。KineticJS ライブラリのローカル コピーを使用してキャンバスに画像を描画しました (提供する機能を少し変更したかったので、ローカル コピーを使用しています)。

<p></p>キャンバスに表示した特定の画像の上にカーソルが置かれていることが検出されたときに、HTML タグに表示されるテキストを更新する関数を作成したいと考えています。

私が書いた関数は次のようになります。

function cursorOverAssetsBox(mouseX, mouseY){
if((mouseX >= assetsDescriptionBox.img_x && mouseX <= assetsDescriptionBox.img_x + assetsDescriptionBox.img_width) &&
    (mouseY >= assetsDescriptionBox.img_y && mouseY <= assetsDescriptionBox.img_height))
    document.getElementById('tipsParagraph').innerHTML = tips[34];
}

mouseXおよびmouseYグローバル変数であり、次assetsDescriptionBoxの行を使用して変数を定義しました

var assetsDescriptionBox = document.getElementById("assetBox");

「tipsParagraph」は、置換しようとしている innerHTML を持つ段落の ID であり、段落tips[34]に表示するテキストを含む JS 配列の要素です

「assetBox」は、HTML の隠しセクションに含まれている画像に付けた ID です。画像は意図したとおりにキャンバスに表示されますが、その画像にカーソルを合わせるたびに、「assetsDescriptionBox が定義されていません」というコンソール エラーが表示されます...

これがなぜなのかわかりません...行で宣言していませんvar assetsDescriptionBox = ...か？それが不平を言っている行は、私のcursorOverAssetsBox関数の「if」ステートメントです。

ここで私が間違っていることは誰にも分かりますか?

編集

また、Kinetic.js ファイルcursorOverAssetsBox(mouseX, mouseY);の関数に呼び出しを追加すると、キャンバスの周りに画像をドラッグ アンド ドロップできなくなったようです。これはなぜですか?_mousemove

assetsDescriptionBox変数は次の関数で定義されています。

function drawDescriptionBoxes(){
console.log("function drawDescriptionBoxes() is drawing the description boxes");
var assetsDescriptionBox = document.getElementById("assetBox");
var liabilitiesDescriptionBox = document.getElementById("liabilitiesBox");
    var incomeDescriptionBox = document.getElementById("incomeBox");
var expenditureDescriptionBox = document.getElementById("expenditureBox");  

drawBox(assetsDescriptionBox, 70, 400, 120, 70);
drawBox(liabilitiesDescriptionBox, 300, 400, 120, 70);
drawBox(incomeDescriptionBox, 530, 400, 120, 70);
drawBox(expenditureDescriptionBox, 760, 400, 120, 70);

}

この関数は、「drawdescriptionboxes.js」と呼ばれる別の JS ファイルにあり、HTML ファイルの先頭に次の行で追加されています。<script src="drawdescriptionboxes.js"></script>

誰にもアイデアはありますか？

4

0 に答える 0