缩放/拖拽后获取Canvas当前位置及元素坐标计算求助

核心原理：逆仿射变换 #

当你对Canvas应用**缩放（scale）和拖拽（offsetX, offsetY）**时，画布上的逻辑坐标到屏幕坐标的变换公式是：

• 屏幕X = 逻辑X × scale + offsetX
• 屏幕Y = 逻辑Y × scale + offsetY

要从屏幕点击坐标反推逻辑坐标，需要做逆变换——因为变换顺序是先缩放再偏移，逆变换要反向操作：

• 逻辑X = (屏幕X - offsetX) / scale
• 逻辑Y = (屏幕Y - offsetY) / scale

这里的「屏幕X/Y」指点击位置相对于Canvas元素左上角的坐标，而非浏览器视口的clientX/clientY，需要先做一步坐标转换。

具体实现步骤 #

1. 获取Canvas元素的DOM边界，将浏览器视口的clientX/clientY转换为Canvas内部相对坐标
2. 用逆变换公式计算出对应的画布逻辑坐标
3. 用逻辑坐标判断是否命中目标矩形

代码修改（对应第124行） #

downHandler(ev: PointerDownEvent) {
    const { clientX, clientY } = ev;
    // 1. 获取Canvas元素的视口边界
    const canvasRect = this.canvas.getBoundingClientRect();
    // 2. 转换为Canvas元素内部的相对坐标（以Canvas左上角为原点）
    const canvasX = clientX - canvasRect.left;
    const canvasY = clientY - canvasRect.top;
    // 3. 逆变换得到画布原始逻辑坐标（需确保你已维护scale、offsetX、offsetY三个状态变量）
    const logicX = (canvasX - this.offsetX) / this.scale;
    const logicY = (canvasY - this.offsetY) / this.scale;
    
    // 替换为你的目标矩形原始逻辑坐标（未缩放拖拽前的坐标）
    const rectStartX = 100; 
    const rectEndX = 300;   
    const rectStartY = 100; 
    const rectEndY = 300;   
    
    if (
      rectStartX < logicX &&
      rectEndX > logicX &&
      rectStartY < logicY &&
      rectEndY > logicY
    ) {
      // 画布图像逻辑
      console.log("命中目标矩形");
    }
}

关键注意点 #

• scale：当前画布的缩放比例（1.0为原始大小，2.0为放大2倍）
• offsetX/offsetY：画布拖拽后相对于Canvas元素左上角的偏移量
• 逆变换顺序不能颠倒：必须先减去偏移量，再除以缩放比例，否则坐标计算会出错

内容的提问来源于stack exchange，提问作者Jihye.Park