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);

}

此函数位于一个单独的 JS 文件中，名为“drawdescriptionboxes.js”，并已添加到我的 HTML 文件的头部，其中包含以下行<script src="drawdescriptionboxes.js"></script>

有人有想法么？

4

0 回答 0