如何用JavaScript将图像点击像素坐标转换为笛卡尔坐标？

1. 明确Pixel Coordinate（像素坐标）的含义 #

像素坐标指的是相对于图片自身左上角原点的坐标，单位为像素：图片左上角是(0,0)，向右x值递增，向下y值递增。这就是你公式里px对应的参数。

2. 获取图片点击的像素坐标 #

直接用事件的clientX/clientY得到的是相对于浏览器视口的坐标，需要转换成相对于图片的坐标，推荐用getBoundingClientRect()计算，它能准确获取元素在视口中的位置与尺寸：

<img id="graph-img" src="your-graph-image.png" alt="笛卡尔坐标图">
<script>
const img = document.getElementById('graph-img');

img.addEventListener('click', (e) => {
  // 获取图片在视口中的位置和尺寸
  const rect = img.getBoundingClientRect();
  // 计算相对于图片左上角的像素坐标
  const pxX = e.clientX - rect.left;
  const pxY = e.clientY - rect.top;
  
  console.log('点击的像素坐标：', {pxX, pxY});
  // 后续可在此处执行笛卡尔坐标转换
});
</script>

3. 像素坐标转笛卡尔坐标的核心逻辑 #

你提到的公式mx = C + px * A是线性映射规则，结合图片与笛卡尔坐标的差异，需要明确三个关键参数：

• px：上面获取的、相对于图片的像素坐标
• A：缩放比例（1像素对应多少笛卡尔坐标单位，比如图片上10像素对应笛卡尔1个单位，那A=0.1）
• C：笛卡尔原点对应的像素偏移量（需根据图片上的笛卡尔平面手动确定，比如图片上笛卡尔原点在像素坐标(200, 300)处）

另外注意：图片像素坐标的y轴向下递增，标准笛卡尔坐标的y轴向上递增，因此y轴转换需要修正方向。

具体转换公式

假设：

• 图片上笛卡尔原点的像素坐标为(originPxX, originPxY)
• 缩放比例为scale（1像素 = scale 个笛卡尔单位）

转换公式如下：

// 笛卡尔x坐标：像素x减去原点像素x，再乘以缩放比例
const cartesianX = (pxX - originPxX) * scale;
// 笛卡尔y坐标：原点像素y减去像素y，再乘以缩放比例（修正y轴方向）
const cartesianY = (originPxY - pxY) * scale;

4. 完整示例代码 #

<img id="graph-img" src="your-graph.png" style="max-width: 100%;" alt="带笛卡尔坐标的图片">
<p>点击图片查看对应的笛卡尔坐标：<span id="result"></span></p>

<script>
const img = document.getElementById('graph-img');
const resultEl = document.getElementById('result');

// 手动配置：根据你的图片设置这三个参数
const config = {
  originPxX: 250, // 笛卡尔原点在图片上的x像素坐标
  originPxY: 250, // 笛卡尔原点在图片上的y像素坐标
  scale: 0.5      // 1像素对应0.5个笛卡尔单位
};

img.addEventListener('click', (e) => {
  const rect = img.getBoundingClientRect();
  // 获取相对于图片的像素坐标
  const pxX = e.clientX - rect.left;
  const pxY = e.clientY - rect.top;
  
  // 转换为笛卡尔坐标
  const cartX = (pxX - config.originPxX) * config.scale;
  const cartY = (config.originPxY - pxY) * config.scale;
  
  // 优化显示格式
  resultEl.textContent = `X: ${cartX.toFixed(2)}, Y: ${cartY.toFixed(2)}`;
});
</script>

关键注意点 #

• 如果图片有CSS缩放（比如width: 50%），getBoundingClientRect()会自动计算缩放后的尺寸，无需额外处理。
• 务必准确测量图片上笛卡尔原点的像素坐标，可通过图片编辑工具（如PS、系统画图工具）查看对应位置的像素值。

内容的提问来源于stack exchange，提问作者grxuau