📅 最后修改于: 2023-12-03 15:12:15.995000 🧑 作者: Mango
在编写网页或应用程序时，有时需要对坐标系进行转换，一个典型的应用场景是将鼠标点击位置的屏幕坐标转换为页面内的相对坐标。这就需要用到转换原点。
转换原点指的是坐标系上的一个点，用于将对于该点的位置进行坐标转换。一般来说，转换原点会设为坐标系的某个角落，例如左上角或左下角。
在 JavaScript 中，可以通过操作元素的 offsetTop 和 offsetLeft 属性来获取相对于父元素的位置，从而实现坐标转换。可以利用这个特性来实现一个通用的转换原点函数：
function convertCoordinate(x, y, oldOrigin, newOrigin) {
var dx = newOrigin.x - oldOrigin.x;
var dy = newOrigin.y - oldOrigin.y;
var newX = x - dx;
var newY = y - dy;
return { x: newX, y: newY };
}
这个函数接收四个参数：原始坐标 x 和 y，旧的转换原点 oldOrigin 和新的转换原点 newOrigin。它根据转换公式计算出新的坐标，并将其作为一个对象返回。
为了演示如何使用这个函数，我们可以编写一个简单的网页，当用户点击页面时，会将鼠标位置相对于页面左上角的坐标打印出来：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转换原点示例</title>
<script>
function convertCoordinate(x, y, oldOrigin, newOrigin) {
var dx = newOrigin.x - oldOrigin.x;
var dy = newOrigin.y - oldOrigin.y;
var newX = x - dx;
var newY = y - dy;
return { x: newX, y: newY };
}
function handleClick(event) {
var pageX = event.pageX;
var pageY = event.pageY;
var container = document.getElementById("container");
var offsetLeft = container.offsetLeft;
var offsetTop = container.offsetTop;
var oldOrigin = { x: offsetLeft, y: offsetTop };
var newOrigin = { x: 0, y: 0 };
var coord = convertCoordinate(pageX, pageY, oldOrigin, newOrigin);
console.log(coord.x, coord.y);
}
</script>
</head>
<body>
<div id="container" style="position: relative; width: 500px; height: 500px;">
<h1>点击页面，查看坐标</h1>
</div>
<script>
var container = document.getElementById("container");
container.addEventListener("click", handleClick);
</script>
</body>
</html>
这个示例中，我们首先获取了页面中的一个容器元素，并在其中设置一个标题。然后，我们为容器元素添加了一个点击事件监听器，当用户点击容器时，会调用 handleClick 函数。在该函数中，我们首先通过 event.pageX 和 event.pageY 获取了鼠标点击的绝对坐标，接着通过 container.offsetLeft 和 container.offsetTop 获取了容器元素相对于页面左上角的坐标。然后，我们将容器元素的坐标作为旧的转换原点，将 {x:0, y:0} 作为新的转换原点，调用 convertCoordinate 函数计算出相对于容器元素左上角的坐标，并将其打印到控制台。
转换原点是一个常用的坐标转换技术，可以帮助我们将屏幕坐标转换为页面内的相对坐标。在 JavaScript 中，我们可以通过操作元素的 offsetTop 和 offsetLeft 属性来实现坐标转换。