Question

我已经创建了html画布并使用javascript在其上放置了图像。现在我想要当某个人悬停或点击图像时，它会弹出图像的名称，或者图像是字符的一些字符。请告诉我如何通过点击或鼠标悬停来识别特定对象。

请参阅我目前的代码

image 01

    var kotuReady = false;
var kotuImage = new Image();
kotuImage.onload = function ()
{
    kotuReady = true;
};
kotuImage.src = "kotu125_1.gif";


    function drawStuff()
{
//Resize HTML5 canvas to fit window
        ctx.canvas.width  = window.innerWidth;
        ctx.canvas.height = window.innerHeight;


        ctx.drawImage(kotuImage, 80, 450);
        }

请咨询

Answer 1

您可以将图像保存在数组（或其他类型的容器）中，以及它们的大小和位置。像

{ id：23， x：10， y：20，宽度：200，身高：150; }

我在这里使用id字段，因为如果想要删除或刷新等，你应该以某种方式识别图像。
在mosedown，mouseup和mousemove事件上添加事件侦听器。在mousedown获取鼠标朝向画布的位置

function getMousePos（canvas，evt）{ var rect = canvas.getBoundingClientRect（）; 返回{ x：evt.clientX - rect.left， y：evt.clientY - rect.top }; }
迭代图像阵列中的所有图像并检查它们在鼠标位置的位置。如果在图像上单击鼠标，则绘制提示。请注意，如果画布上的图像重叠，那么您应该找到最顶层的图像。最顶层的图像将是您绘制的最新图像。
了解更多......

UPD

<html>
    <head>
    </head>
    <body>
        <canvas id="canvas" width="800px" height="600px"/>
        <script>
var c = document.getElementById("canvas");
ctx = c.getContext("2d");

var images = [];

function addImageOnCanvas(ctx, src, posx, posy, width, height, id) {
    var kotuImage = new Image();
    kotuImage.src = src;
    ctx.drawImage(kotuImage, posx, posy);
    images.push({
        id: id,
        x: posx,
        y: posy,
        width: width,
        height: height
    });
}

addImageOnCanvas(ctx, "boobs.jpg", 20, 20, 194, 260, 1);
addImageOnCanvas(ctx, "boobs.jpg", 50, 50, 194, 260, 2);

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect();
    return { 
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
    };
}
ctx.font = "30px Arial";
function drawTooltip(x, y, msg) {
    ctx.fillText(msg, x, y);
}
function mousedownevent(event) {
    var coord = getMousePos(c, event), i;
    //optimization needed
    console.log("[" + coord.x + ", " + coord.y + "]");
    for (i = images.length-1; i > -1; i--) {
        if (images[i].x < coord.x && images[i].x > coord.x - images[i].width && 
            images[i].y < coord.y && images[i].y > coord.y - images[i].height) {
            drawTooltip(coord.x, coord.y, images[i].id);
            break;
        }
    }
}
c.addEventListener("mousedown", mousedownevent, false);

        </script>
    </body>
</html>

说明：在画布上绘制图像时，只需复制部分位图。所以canvas不知道有一些对象，它只存储像素。所以你必须在其他地方保留关于位图上对象的信息。

P.S。之后还有更多问题。如何编写工具提示并在以下情况下将其销毁：好吧，因为我找不到任何方法来复制位图的部分（ImageData），最简单的方法是使用两个画布，一个刚好在另一个画布上。或者，重绘整个对象。但这很慢，会造成许多不良的视觉效果，比如眨眼。

将鼠标悬停在html5画布图像对象上时如何显示标题

1 个答案: