JavaScript中的坐标

🧑‍🎓 个人主页：《爱蹦跶的大A阿》

🔥当前正在更新专栏：《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》

​ 

​

✨ 前言

        在我们的日常生活中，JavaScript已经成为了一种无处不在的编程语言。它的应用范围从简单的网页动画，到复杂的前端框架，再到后端的Node.js，甚至还包括物联网设备。然而，JavaScript并非一成不变，它一直在发展，一直在添加新的特性和功能。今天，我们将探讨JavaScript中的一个重要的概念：坐标。在这篇文章中，我们将详细介绍坐标，包括它的定义、使用方法，以及如何在不支持坐标的浏览器中进行polyfill。

​

✨ 正文

坐标

在JavaScript中，大多数方法处理的是以下两种坐标系中的一个：

• 相对于窗口：类似于position:fixed，从窗口的顶部/左侧边缘计算得出。我们将这些坐标表示为clientX/clientY。
• 相对于文档：与文档根（document root）中的position:absolute类似，从文档的顶部/左侧边缘计算得出。我们将它们表示为pageX/pageY。

        当页面滚动到最开始时，此时窗口的左上角恰好是文档的左上角，它们的坐标彼此相等。但是，在文档移动之后，元素的窗口相对坐标会发生变化，因为元素在窗口中移动，而元素在文档中的相对坐标保持不变。

在下图中，我们在文档中取一点，并演示了它滚动之前（左）和之后（右）的坐标：

元素坐标：getBoundingClientRect方法

elem.getBoundingClientRect()方法返回最小矩形的窗口坐标，该矩形将elem作为内建DOMRect类的对象。主要的DOMRect属性有：

• x/y：矩形原点相对于窗口的X/Y坐标
• width/height：矩形的宽度/高度（可以为负）

此外，还有派生（derived）属性：

• top/bottom：顶部/底部矩形边缘的Y坐标
• left/right：左/右矩形边缘的X坐标

下面这张是 elem.getBoundingClientRect() 的输出的示意图：

elementFromPoint(x, y)

document.elementFromPoint(x, y)的调用会返回在窗口坐标(x, y)处嵌套最多（the most nested）的元素。

let elem = document.elementFromPoint(x, y);
elem.style.background = '';

        对于在窗口之外的坐标，elementFromPoint返回null。方法document.elementFromPoint(x,y)只对在可见区域内的坐标(x,y)起作用。如果任何坐标为负或者超过了窗口的width/height，那么该方法就会返回null。

🔔 为什么需要派生（derived）属性？如果有了 x/y，为什么还要还会存在 top/left？

从数学上讲，一个矩形是使用其起点 (x,y) 和方向向量 (width,height) 唯一定义的。因此，其它派生属性是为了方便起见。

从技术上讲，width/height 可能为负数，从而允许“定向（directed）”矩形，例如代表带有正确标记的开始和结束的鼠标选择。

负的 width/height 值表示矩形从其右下角开始，然后向左上方“增长”。

这是一个矩形，其 width 和 height 均为负数（例如 width=-200，height=-100）：

正如你所看到的，在这个例子中，left/top 与 x/y 不相等。

但是实际上，elem.getBoundingClientRect() 总是返回正数的 width/height，这里我们提及负的 width/height 只是为了帮助你理解，为什么这些看起来重复的属性，实际上并不是重复的。

        希望这个详细的概述能帮助你理解JavaScript中的坐标，并为你的博客文章提供一个良好的起点。如果你需要更多的信息或者对某个部分有更深入的问题，欢迎随时向我提问！

✨ 结语

        JavaScript的坐标为我们打开了一个全新的世界，让我们能够在JavaScript中处理任意大小的字符。虽然坐标在一些方面与常规的字符有所不同，但是只要我们理解了这些差异，并知道如何正确地使用坐标，我们就能够充分利用它的强大功能。无论你是正在处理大数据，还是在进行高精度计算，坐标都能够提供强大的支持。希望这篇文章能够帮助你理解和掌握JavaScript中的坐标，让你在编程的道路上更进一步。如果你有任何问题或者需要更深入的讨论，欢迎随时向我提问！

​