Phonegap Canvas触摸事件坐标异常问题求助

这种触摸坐标和Canvas绘制位置不匹配的问题我之前在移动端开发时也碰到过，几乎都是Canvas的显示尺寸与画布分辨率不匹配或者坐标转换逻辑有误导致的，而且在不同设备上表现一致，说明是共性问题，下面给你几个可行的解决思路：

1. 先对齐Canvas的显示尺寸和画布分辨率 #

很多开发者容易混淆Canvas的两个"尺寸"：

• CSS样式设置的是Canvas在页面上的显示尺寸
• Canvas自身的width/height属性决定的是画布分辨率（也就是绘制时的坐标基准）

如果这两个尺寸不一致，就会导致触摸坐标和绘制坐标出现缩放偏差。比如你给Canvas加了style="width:100%;height:100%"，但没设置width/height属性，浏览器会默认用300x150的分辨率，这时候触摸坐标就会被错误缩放。

解决办法：

const canvas = document.getElementById('yourCanvas');
const ctx = canvas.getContext('2d');
// 获取Canvas在页面上的实际显示尺寸
const rect = canvas.getBoundingClientRect();
// 适配移动端高DPI屏幕，获取设备像素比
const dpr = window.devicePixelRatio || 1;
// 设置画布分辨率匹配显示尺寸 * 设备像素比
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
// 调整绘图上下文的缩放，确保绘制的图形不会模糊
ctx.scale(dpr, dpr);

2. 正确转换触摸坐标到Canvas本地坐标 #

pageX/pageY是相对于整个文档的坐标，而Canvas的绘制坐标是相对于自身左上角的，所以必须做坐标转换，还要结合上面的设备像素比：

function getCanvasLocalCoords(canvas, touch) {
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    // 计算相对于Canvas左上角的坐标，同时适配DPR
    return {
        x: (touch.pageX - rect.left - window.scrollX) / dpr,
        y: (touch.pageY - rect.top - window.scrollY) / dpr
    };
}

然后在触摸事件里使用这个函数：

canvas.addEventListener('touchstart', (e) => {
    e.preventDefault(); // 阻止默认触摸行为（比如页面滚动）避免干扰
    const touch = e.touches[0]; // 获取第一个触摸点
    const coords = getCanvasLocalCoords(canvas, touch);
    // 绘制测试矩形，以触摸点为中心
    ctx.fillRect(coords.x - 10, coords.y - 10, 20, 20);
});

3. 排查CSS变换的影响 #

如果Canvas或者它的父元素应用了transform、scale、translate等CSS变换，会导致getBoundingClientRect()的计算结果出现偏差，这时候建议：

• 尽量避免对Canvas元素使用CSS变换
• 如果必须使用，需要额外计算变换带来的偏移量（这个比较复杂，优先建议移除变换）

4. 用极简代码验证 #

你可以先写一个极简的测试页面，排除项目中其他代码的干扰，确认上面的逻辑是否有效：

<canvas id="testCanvas" style="border:1px solid #ccc; width: 100vw; height: 100vh;"></canvas>
<script>
const canvas = document.getElementById('testCanvas');
const ctx = canvas.getContext('2d');
const rect = canvas.getBoundingClientRect();
const dpr = window.devicePixelRatio || 1;
canvas.width = rect.width * dpr;
canvas.height = rect.height * dpr;
ctx.scale(dpr, dpr);

canvas.addEventListener('touchstart', (e) => {
    e.preventDefault();
    const touch = e.touches[0];
    const rect = canvas.getBoundingClientRect();
    const x = (touch.pageX - rect.left - window.scrollX) / dpr;
    const y = (touch.pageY - rect.top - window.scrollY) / dpr;
    ctx.fillStyle = '#000';
    ctx.fillRect(x - 10, y - 10, 20, 20);
});
</script>

这个代码应该能让你触摸哪里就绘制到哪里，你可以先在测试设备上验证，再把逻辑迁移到你的项目中。

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