画布鼠标悬停

Question

I'm having a canvas on which i have created dynamically some rectangles and when you hover over them i need to show an username that's stored, i tried to do it like this but i didn't got the result that i desired. 我在画布上动态创建了一些矩形，当您将鼠标悬停在它们上方时，我需要显示存储的用户名，我试图这样做，但没有得到想要的结果。 The rectangles are not html elements so i can't use classes or ids. 矩形不是html元素，所以我不能使用类或id。

This is the code that i tried: 这是我尝试的代码：

canvas.addEventListener('mouseover', (evt)=>{
       mousePos = onMousePos(canvas,evt);
       for(let i=0;i<rectArray.length;i++)
           if(ctx.isPointInPath(mousePos.x,mousePos.y))
                 console.log(rectArray[i].username);
});

The onMousePos function checks the that the mouse is inside of an hexagon and i use the same function for mouseup, mousedown and mousemove and it works. onMousePos函数检查鼠标是否在六边形内，并且我对mouseup，mousedown和mousemove使用相同的函数，并且可以正常工作。

EDIT the onMousePos is this: 编辑 onMousePos是这样的：

function onMousePos(canvas, evt) {
    const rect = canvas.getBoundingClientRect();
    if (history && timeline) {
        return {
            x: Math.round(evt.clientX - rect.left) * 1.18,
            y: Math.round(evt.clientY - rect.top) * 1.05
        };
    }
    if (timeline && history === false) {
        return {
            x: Math.round(evt.clientX - rect.left),
            y: Math.round(evt.clientY - rect.top) * 1.05
        };
    }
    if (history && timeline === false) {
        return {
            x: Math.round(evt.clientX - rect.left) * 1.18,
            y: Math.round(evt.clientY - rect.top)
        };
    }
    return {
        x: Math.round(evt.clientX - rect.left),
        y: Math.round(evt.clientY - rect.top)
    };
}

Answer 1

 <!doctype html> <html> <head> <meta charset="utf-8"> <style> body { background-color: black; } canvas { display: block; margin: auto; border: solid 1px white; border-radius: 10px; } </style> </head> <body> <canvas id="canvas"></canvas> <script type="application/javascript"> void function() { "use strict"; // Classes /* Constructor function when called with new, everything attached to the 'this' keyword becomes a new member of the new object */ function ToolTip(text) { this.text = text; } /* Constructor prototype, a collection of values & functions that are shared across all instances, use for constant values and member functions */ ToolTip.prototype = { TEXT_SIZE: 15, TEXT_FONT: "15px Arial", TEXT_COLOUR: "#FFFFFFFF", BOX_BORDER_COLOUR: "#000000FF", BOX_BACKGROUND_COLOUR: "#990000FF", render: function(ctx,x,y) { ctx.fillStyle = this.BOX_BACKGROUND_COLOUR; ctx.strokeStyle = this.BOX_BORDER_COLOUR; ctx.font = this.TEXT_FONT; ctx.beginPath(); ctx.rect( x, y - this.TEXT_SIZE, ctx.measureText(this.text).width, this.TEXT_SIZE ); ctx.fill(); ctx.stroke(); ctx.fillStyle = this.TEXT_COLOUR; ctx.fillText(this.text,x,y - 2); } }; function Rectangle(x,y,width,height,name) { this.x = x; this.y = y; this.width = width; this.height = height; this.tooltip = new ToolTip(name); } Rectangle.prototype = { BORDER_COLOUR: "#000000FF", BACKGROUND_COLOR: "#0000AAFF", contains: function(x,y) { return x > this.x && x < this.x + this.width && y > this.y && y < this.y + this.height; }, render: function(ctx) { ctx.strokeStyle = this.BORDER_COLOUR; ctx.fillStyle = this.BACKGROUND_COLOR; ctx.beginPath(); ctx.rect(this.x,this.y,this.width,this.height); ctx.fill(); ctx.stroke(); } }; // Variables var canvasWidth = 150; var canvasHeight = 150; var canvas = null; var ctx = null; var rectangles = null; // Functions function onMouseMove(e) { var bounds = canvas.getBoundingClientRect(); var x = e.clientX - bounds.left; var y = e.clientY - bounds.top; draw(); for (var i = 0; i < rectangles.length; ++i) { var rectangle = rectangles[i]; if (rectangle.contains(x,y)) { rectangle.tooltip.render(ctx,x,y); return; } } } function draw() { ctx.fillStyle = "gray"; ctx.fillRect(0,0,canvasWidth,canvasHeight); for (var i = 0; i < rectangles.length; ++i) { rectangles[i].render(ctx); } } // Entry Point onload = function() { canvas = document.getElementById("canvas"); canvas.width = canvasWidth; canvas.height = canvasHeight; canvas.onmousemove = onMouseMove; ctx = canvas.getContext("2d"); rectangles = [ new Rectangle(10,10,25,25,"User 1"), new Rectangle(45,10,25,25,"User 2"), new Rectangle(80,10,25,25,"User 3"), new Rectangle(115,10,25,25,"User 4"), new Rectangle(10,45,25,25,"User 5"), new Rectangle(45,45,25,25,"User 6"), new Rectangle(80,45,25,25,"User 7"), new Rectangle(115,45,25,25,"User 8"), new Rectangle(10,80,25,25,"User 9"), new Rectangle(45,80,25,25,"User 10"), new Rectangle(80,80,25,25,"User 11"), new Rectangle(115,80,25,25,"User 12"), new Rectangle(10,115,25,25,"User 13"), new Rectangle(45,115,25,25,"User 14"), new Rectangle(80,115,25,25,"User 15"), new Rectangle(115,115,25,25,"User 16") ]; draw(); } }(); </script> </body> </html>

画布鼠标悬停

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-08-24 08:58:44

画布鼠标悬停

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-08-24 08:58:44

解决方案1
0 已采纳 2018-08-24 08:58:44