当光标悬停在HTML5画布上的图像上时，更新段落中显示的文本

Updating the text displayed in a paragraph when the cursor hovers over an image on HTML5 canvas

本文关键字：更新 段落中 文本 显示 图像 光标 HTML5 悬停      更新时间：2023-09-26

我在HTML5画布上有一些图像，我想调用一个函数，每当光标悬停在其中一个图像上时，该函数就会更新HTML <p></p>标记中显示的文本。使用以下功能将图像绘制到画布上：

function drawBox(imageObj, img_x, img_y, img_width, img_height) {
    console.log("function drawBox is drawing the description boxes");
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: img_width,
      height: img_height,
      // puts the image in the middle of the canvas
      x: img_x,
      y: img_y
    });
    // add cursor styling
    imagesLayer.add(canvasImage);
}

我已经尝试向每个图像添加一个onmouseover函数，方法是添加一些代码来调用我所拥有的将段落内容更新到此函数的函数，因此我的drawBox函数现在看起来如下：

function drawBox(imageObj, img_x, img_y, img_width, img_height) {
    console.log("function drawBox is drawing the description boxes");
    var canvasImage = new Kinetic.Image({
      image: imageObj,
      width: img_width,
      height: img_height,
      // puts the image in the middle of the canvas
      x: img_x,
      y: img_y
    });
    // add cursor styling

    canvasImage.on("mouseover", function(){
        //displayAssetDescriptionTip();
        console.log("displayAssetDescriptionTip() is being called on mouseover event");
        });
    imagesLayer.add(canvasImage);
}

当我如上所述使用该函数查看页面，并将光标悬停在已添加该函数的图像上时，我添加到mouseover函数中的日志将显示在控制台中，这样我就知道鼠标悬停工作正常。

但是，我遇到的问题是要从mouseover事件中调用的函数。您将在上面看到，我已经在mouseover事件中注释掉了对函数displayAssetDescriptionTip()的调用。这是我想在光标悬停在这些图像上时调用的函数，然而，它似乎总是将段落中的文本更改为属于第一个描述框的文本。。。即，如果光标悬停在我添加了mouseover事件的任何图像上，则文本将更改为属于第一个图像的文本，而不是光标悬停的图像。

功能是：

function displayAssetDescriptionTip(){
    if(canvasImage.id = "assetBox")
        document.getElementById('tipsParagraph').innerHTML = tips[34];
    else if(canvasImage.id = "liabilitiesBox")
        document.getElementById('tipsParagraph').innerHTML = tips[35];
    else if(canvasImage.id = "incomeBox")
        document.getElementById('tipsParagraph').innerHTML = tips[36];
    else if(canvasImage.id = "expenditureBox")
        document.getElementById('tipsParagraph').innerHTML = tips[37];
    else return;
    console.log("displayAssetDescriptionTip being called");
}

有人知道为什么它总是将文本更改为第一个图像的文本，而不是与任何其他图像对应的文本吗？我已经设置它，根据光标悬停在哪个图像上，将文本更改为数组的不同元素，因此它应该为每个图像显示与该数组不同的元素。。。

在函数displayAssetDescriptionTip中，您使用的是=赋值运算符，而不是==比较运算符，因此您的第一个if条件总是匹配的。

更正的动作：

function displayAssetDescriptionTip(canvasImage){
    if(canvasImage.id == "assetBox")
        document.getElementById('tipsParagraph').innerHTML = tips[34];
    else if(canvasImage.id == "liabilitiesBox")
        document.getElementById('tipsParagraph').innerHTML = tips[35];
    else if(canvasImage.id == "incomeBox")
        document.getElementById('tipsParagraph').innerHTML = tips[36];
    else if(canvasImage.id == "expenditureBox")
        document.getElementById('tipsParagraph').innerHTML = tips[37];
    else return;
    console.log("displayAssetDescriptionTip being called");
}

不要忘记将canvasImage作为参数传递给事件处理程序

 canvasImage.on("mouseover", function(){
        displayAssetDescriptionTip(canvasImage);
        });
相关文章：