Canvas变换后，如何获取字符在单位矩阵空间的等效坐标？

要拿到字符"a"在原始画布（单位矩阵空间）的坐标，不用绕弯子，直接从你设置的变换参数就能算出来，或者用逆变换处理，两种方法都比转换鼠标坐标更直接：

直接推导字符位置 #

你用的ctx.setTransform(12,0,0,12,34,23)，对应Canvas变换矩阵的参数是[a,b,c,d,e,f]，这里a、d是x/y方向的缩放倍数（都是12），e、f是画布上的平移量（34和23）。

你在变换后的坐标里把"a"画在(0,0)，那它在原始画布的坐标就是：

• 原始x = 0*12 + 34 = 34
• 原始y = 0*12 + 23 = 23

注意：Canvas画文字是基于基线的，fillText("a",0,0)里的(0,0)是字符的基线位置，不是左上角。如果要精准拿到字符的整个包围盒，得结合measureText：

// 先保存当前画布状态
ctx.save();
// 应用目标变换
ctx.setTransform(12,0,0,12,34,23);
// 测量字符尺寸细节
const textInfo = ctx.measureText("a");
// 计算字符在变换空间的包围盒（基线为y=0，顶部y值为负）
const transformedBox = {
  x: 0,
  y: -textInfo.actualBoundingBoxAscent,
  width: textInfo.width,
  height: textInfo.actualBoundingBoxAscent + textInfo.actualBoundingBoxDescent
};
// 恢复原始画布状态
ctx.restore();

// 将包围盒转换到原始画布空间
const originalBox = {
  x: transformedBox.x * 12 + 34,
  y: transformedBox.y * 12 + 23,
  width: transformedBox.width * 12,
  height: transformedBox.height * 12
};

鼠标点击判断的简便方案 #

如果是要判断鼠标是否点中字符，不用每次把鼠标坐标转换到变换空间，直接用上面算出的originalBox，拿原始鼠标坐标和这个包围盒做碰撞检测即可：

function isTextClicked(mouseX, mouseY, box) {
  return mouseX >= box.x && mouseX <= box.x + box.width &&
         mouseY >= box.y && mouseY <= box.y + box.height;
}

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