在Javascript中，为什么getBoundingClientRect（）有时会返回浮点值？ [英] In Javascript, why does getBoundingClientRect() sometimes return floating point values?
问题描述
我正在尝试使用HTML5 canvas元素。我要做的一件事是设置一个mousemove事件来跟踪画布上的鼠标以进行绘图和其他目的。我还没有找到关于如何在鼠标结束时获得画布中像素的精确坐标的明确答案。我在网上找到了一个有这个html的教程（我在画布上添加了背景颜色，使其在渲染页面上显而易见）：
I'm trying to work with an HTML5 canvas element. One thing i'm trying to do is set up a mousemove event to track the mouse on the canvas for drawing and other purposes. I have not been able to find a definitive answer on how to get the exact coordinates of the pixel in the canvas the mouse is over. I found a tutorial on the web that had this html (I added the background-color to the canvas to make it obvious on the rendered page):
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#myCanvas {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
function writeMessage(canvas, message) {
var context = canvas.getContext('2d');
context.clearRect(0, 0, canvas.width, canvas.height);
context.font = '18pt Calibri';
context.fillStyle = 'black';
context.fillText(message, 10, 25);
}
function getMousePos(canvas, evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
canvas.addEventListener('mousemove', function(evt) {
var mousePos = getMousePos(canvas, evt);
var message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
writeMessage(canvas, message);
}, false);
</script>
</body>
</html>
当页面加载时，您会在左上角看到画布为蓝色矩形页。将鼠标移到它上面，画布上的文字会改变，将鼠标位置显示为两个整数，分别为X和Y.
When the page is loaded, you see the canvas as a blueish rectangle in the upper left corner of the page. Move the mouse over it and the text in the canvas changes to show the mouse position as two ints, one each for X and Y.
然后我修改了画布样式添加一个上边距和左边距，并保持页面的其余部分不变。
I then modified the canvas style by adding a top and left margin, and left the rest of the page unchanged.
#myCanvas {
background-color: cornflowerblue;
margin-left: 30px;
margin-top: 30px;
}
当我现在渲染页面时，画布的蓝色矩形偏离了正如我所料，页面的顶部和左侧。但是将鼠标移到画布上现在有了X和Y鼠标坐标，这些坐标在画布中显示为具有许多小数位的浮点数。稍微跟踪代码，似乎getBoundingClientRect（）返回一个矩形，其中值top和left是浮点数。
When I rendered the page now, the blue rectangle of the canvas was offset from the top and left of the page as I expected. But passing my mouse over the canvas now had the X and Y mouse coordinates that were being displayed in the canvas coming up as floats with many decimal places. Tracing through the code a bit, it seems that getBoundingClientRect() is returning a rect where the values top and left are floats.
我假设我可以执行截断或者舍入getBoundingClientRect（）返回的值，但这对我来说是错误的方式。
I assume I could do something like truncate or round the values being returned by getBoundingClientRect(), but that feels like the wrong way to go about it to me.
我是以某种方式错误地使用getBoundingClientRect（），或者是它应该返回漂浮值吗？
Am i somehow using getBoundingClientRect() incorrectly, or is it expected that it should return float values?
在听各种鼠标时，是否有明确的方法可以在画布上获得鼠标的精确X和Y坐标事件？
And is there a clear cut way to get the exact X and Y coordinates of the mouse over the canvas when listening for various mouse events?
推荐答案
tldr;你在浏览器中进行缩放/取消缩放。
tldr; you did zoom/unzoom in your browser.
问题
margin-left: 30px;
在此 jsfiddle 这就像模仿你的问题一样，当导航仪缩放设置为100％（正常）时，它不能像我在电脑上说的那样有效。但如果你在浏览器中放大，你会发现这种行为。
In this jsfiddle thats mimics your problem it does not works as you said on my computer when navigator zoom is set to 100% (normal). But if you zoom inside your browser you will notice such behavior.
margin-left: 11%;
相反，如果你使用％margin，就像在这个 jsfiddle 你会注意到它确实会返回浮动鼠标位置，是否打开缩放。
Instead if you use % margin like in this jsfiddle you will notice it does returns floating mouse position wether zoom is on or not.
答案
鼠标位置的计算方法与屏幕上显示的一样：它可能只有整个位置坐标，因为它是基于像素的。
The thing is mouse position is computed as it appears on the screen : it may only have entire position coordinates since it is pixel based.
然而，getBoundingClientRect在应用边距，缩放和其他修改器之后但在告诉GPU渲染之前，返回浏览器计算为边界客户端矩形元素。简而言之，它返回元素的实际位置，该元素稍后由GPU近似以在像素矩阵内呈现。如果使用像素边距/尺寸/填充/等，则元素位置保持整数，但如果缩放或使用em /％定位值，则可能导致浮动位置。
However getBoundingClientRect returns what browser computes to be "Bounding Client Rect of the element" after applying margins, zoom and others modifiers but before telling the GPU to render it. In short it returns the real position of the element which is later approximated by the GPU to be rendered within a matrix of pixels. If you use pixel margins/sizes/paddings/etc then elements positions remains integer based, but if you zoom or use em/% positioning values then it may result floating positions.
解决方案
- 圆形边界
- 假设它确实是一个浮动位置而且它只是GPU需要围绕它以使其适合屏幕
编辑：遗忘的解决方案
这篇关于在Javascript中，为什么getBoundingClientRect（）有时会返回浮点值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
