如何在网页上找到鼠标的确切position
[英]How to find the exact position of the mouse on the webpage
问题描述
I have been trying to develop a drawing application.
我一直在尝试开发绘图应用程序。 When I try to plot a point for freehand drawing, the point appears a good 100 or so pixels away from the actual position of the mouse pointer.当我尝试用 plot 一个点进行徒手绘图时，该点看起来距离鼠标指针的实际 position 100 左右像素。 Is there any way I can get the exact position of the mouse?有什么办法可以得到鼠标的确切 position 吗？ You can see and run the code below.您可以查看并运行下面的代码。
const canvasEle = document.getElementById('drawContainer'); const context = canvasEle.getContext('2d'); function setMousePosition (e) { var x = e.clientX; var y = e.clientY; console.log("x coord " + x + " y coord " + y); changePixelColor(x, y) } function changePixelColor (x, y) { context.fillRect(x,y,1,1); } canvasEle.addEventListener("mousemove", setMousePosition)
canvas { border: 1px solid black; width: 500px; height: 500px; position: absolute; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Draw</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="drawContainer"></canvas> </body> <script src="app.js"></script> </html>
2 个解决方案
解决方案1
1 2020-11-26 09:10:16
Try removing height and width from CSS and use the canvas' width and height attributes instead.尝试从 CSS 中删除高度和宽度，并改用画布的宽度和高度属性。 Another tip to center the mouse on the painted rectangle is to subtract half the size of the rectangle, eg context.fillRect(x-0.5,y-0.5,1,1).将鼠标置于绘制矩形中心的另一个技巧是减去矩形大小的一半，例如 context.fillRect(x-0.5,y-0.5,1,1)。 In your case it's hard to actually see that the dot isn't centered so try with context.fillRect(x-25,y-25,50,50) and you will see a difference compared to context.fillRect(x-25,y,50,50)在您的情况下，实际上很难看到该点没有居中，因此请尝试使用 context.fillRect(x-25,y-25,50,50) ，您会看到与 context.fillRect(x-25, y,50,50)
const canvasEle = document.getElementById('drawContainer'); const context = canvasEle.getContext('2d'); function setMousePosition (e) { var x = e.clientX; var y = e.clientY; //console.log("x coord " + x + " y coord " + y); changePixelColor(x, y) } function changePixelColor (x, y) { context.fillRect(x-0.5,y-0.5,1,1); //context.fillRect(x,y,50,50); compare these to see the difference //context.fillRect(x-25,y-25,50,50); } canvasEle.addEventListener("mousemove", setMousePosition)
canvas { border: 1px solid black; position: absolute; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Draw</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas width="500" height="500" id="drawContainer"></canvas> </body> <script src="app.js"></script> </html>
解决方案2
1 已采纳 2020-11-26 09:10:33
Try like this:试试这样：
const canvasEle = document.getElementById('drawContainer'); const context = canvasEle.getContext('2d'); const cr = canvasEle.getBoundingClientRect(); function setMousePosition (e) { var x = e.clientX - cr.x; var y = e.clientY - cr.y; console.log("x coord " + x + " y coord " + y); changePixelColor(x, y) } function changePixelColor (x, y) { context.fillRect(x,y,1,1); } canvasEle.width = 500; canvasEle.height = 500; canvasEle.addEventListener("mousemove", setMousePosition)
canvas { border: 1px solid black; width: 500px; height: 500px; position: absolute; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Draw</title> <link rel="stylesheet" href="style.css"> </head> <body> <canvas id="drawContainer"></canvas> </body> <script src="app.js"></script> </html>
Two additions to resolve this:解决此问题的两个补充：
- offsetting the
xandyvalues insetMousePosition, so that they become relative to the canvas position, rather than to the page.偏移setMousePosition中的x和y值，使它们相对于 canvas position，而不是相对于页面。 - setting the
widthandheightof the canvas element in either JavaScript or the HTML attributes.在 JavaScript 或 HTML 属性中设置 canvas 元素的width和height。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.