Question

我在画布上动态创建了一些矩形，当您将鼠标悬停在它们上时，我需要显示存储的用户名，我试图这样做，但是我没有得到想要的结果。矩形不是html元素，所以我不能使用类或id。

这是我尝试过的代码：

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

onMousePos函数检查鼠标是否在六边形内，并且我对mouseup，mousedown和mousemove使用相同的函数，并且可以正常工作。

EDIT 的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 个答案: