一个关于getBoundingClientRect()的例子

Posted 2020-11-25 ranmomo

最近发现一个问题，MouseEvent.clientX、MouseEvent.clientY获取到的坐标点是以当前body的左上角为坐标原点，若body含有水平滚动条或垂直滚动条时，左上角还是坐标原点。

入下图所示，不管水平滚动条或垂直滚动条怎么移动时，以左上角的那个点为坐标原点

在网上找了找，发现只有关于getBoundingClientRect()的介绍，然后自己就琢磨了一下，用起来还是挺方便的。

上图我创建了三给按钮：

第一个是当鼠标在我定义的画布区域中移动时获取(clienX,clienY)的坐标，
第二个是当水平滚动条或垂直滚动条改变时，用getBoundingClientRect()方法获取画布区域的top、left、right、bottom的数值
第三个是用(clienX-top,clienY-left)的值

代码部分：

var canF=document.getElementById("canvas_floor");//获取我定义的画布节点
canFloor.onmousemove = function(e) {//鼠标移动事件
    canFF=canF.getBoundingClientRect();//调用这个方法
                
    var t=canFF.top;//获取这些值
    var l=canFF.left;
    var r=canFF.right;
    var b=canFF.bottom;
                
    xy.value = "(" + t + "," + l + "," + r+"," + b+")";//第二个按钮
    var x = e.clientX;
    var y = e.clientY;
    var x_y1 = document.getElementById("x_y1");
    x_y.value = "(" + x + "," + y + ")";//第一个按钮
    var xx=x-l;
    var yy=y-t
    xxyy.value="(" + xx+ "," + yy + ")";//第三个按钮
}

下图为当滚动条改变后获取到的一些值：

当bottom-top=600；
当right-left=1200；

<canvas id="canvas_floor" width="1200" height="600"  onmousedown="fiiyuan(event)" onmouseup="fiiiyuan(event)">
            Your browser does not support the canvas element.
        </canvas>

这两个数值不就是我对画布定义的width和height嘛

所以，当画布有滚动条后，传(clienX,clienY)的值去创建图案就会有问题。

就好比下图，明明我的画布高是600，但在鼠标移动到黑点的区域时(clienX,clienY)显示的值明显就是错的，实际的值是(clienX-top,clienY-left),也就是第三个按钮显示的值。

当我将浏览器窗口最大化时，没有了滚动条，鼠标移动到黑点位置。果然，其坐标点就是(clienX-top,clienY-left)