Canvas缩放坐标偏移问题及平滑缩放实现技术咨询

一、修复光标位置偏移问题 #

你的代码核心问题是坐标转换逻辑错误、缩放变量未初始化及变换参数错误，以下是针对性修正：

1. 初始化核心变量，修正变换参数 #

补全scale变量初始化，同时修正setTransform的参数顺序（正确顺序：水平缩放、水平倾斜、垂直倾斜、垂直缩放、水平偏移、垂直偏移）：

function scale() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    const canvas_width = document.documentElement.scrollWidth;
    const canvas_height = document.documentElement.scrollHeight;

    canvas.addEventListener("wheel", onmousewheel, false);
    canvas.addEventListener("DOMMouseScroll", onmousewheel, false);

    var position = {x: 0, y: 0};
    var scale = 1; // 初始化基础缩放值

    function onmousewheel(event) {
        // ... 后续代码
        // 修正setTransform参数
        context.setTransform(scale, 0, 0, scale, position.x, position.y);
        // ...
    }
}

2. 正确计算光标对应的内容坐标 #

将浏览器光标坐标转换为Canvas本地坐标，再逆推到当前缩放/偏移下的内容原始坐标：

function onmousewheel(event) {
    event.preventDefault();
    // 获取Canvas元素在页面中的位置
    const rect = canvas.getBoundingClientRect();
    // 计算光标相对于Canvas左上角的坐标
    const canvasX = event.clientX - rect.left;
    const canvasY = event.clientY - rect.top;
    // 逆变换：得到光标在未缩放/偏移的内容坐标系中的位置
    const worldX = (canvasX - position.x) / scale;
    const worldY = (canvasY - position.y) / scale;

    // ... 缩放逻辑
}

3. 保持光标位置不变的缩放逻辑 #

缩放时确保光标指向的内容位置固定，偏移量基于光标对应的内容坐标计算：

function onmousewheel(event) {
    // ... 坐标计算部分
    const delta = event.type === "wheel" ? event.wheelDelta : -event.detail;
    const increment = delta > 0 ? 1.1 : 0.9;

    const previousScale = scale;
    scale *= increment;
    // 限制缩放范围（可选，防止过度缩放）
    scale = Math.max(0.1, Math.min(5, scale));

    // 重新计算偏移量，让光标指向的内容位置保持不动
    position.x = canvasX - worldX * scale;
    position.y = canvasY - worldY * scale;

    // 重绘
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.setTransform(scale, 0, 0, scale, position.x, position.y);
    CANVAS.draw();
}

二、实现平滑缩放动画 #

直接通过滚轮修改缩放值会导致生硬卡顿，改用requestAnimationFrame逐帧过渡到目标缩放值，配合缓动效果实现平滑动画：

1. 新增动画状态变量 #

function scale() {
    // ... 原有变量
    var scale = 1;
    var targetScale = 1; // 目标缩放值
    var isAnimating = false; // 动画状态标记
    // 记录光标对应的关键坐标（用于动画过程中保持位置）
    var targetCanvasX, targetCanvasY, targetWorldX, targetWorldY;

    // ... 事件监听和其他函数
}

2. 修改滚轮事件逻辑 #

滚轮事件仅更新目标缩放值和光标坐标，不直接修改当前缩放：

function onmousewheel(event) {
    event.preventDefault();
    const rect = canvas.getBoundingClientRect();
    targetCanvasX = event.clientX - rect.left;
    targetCanvasY = event.clientY - rect.top;
    targetWorldX = (targetCanvasX - position.x) / scale;
    targetWorldY = (targetCanvasY - position.y) / scale;

    const delta = event.type === "wheel" ? event.wheelDelta : -event.detail;
    const increment = delta > 0 ? 1.1 : 0.9;
    targetScale *= increment;
    // 限制缩放范围
    targetScale = Math.max(0.1, Math.min(5, targetScale));

    // 未在动画时启动动画
    if (!isAnimating) {
        isAnimating = true;
        requestAnimationFrame(updateScale);
    }
}

3. 逐帧更新缩放与偏移 #

通过缓动系数让缩放过渡更自然，直到当前缩放逼近目标值：

function updateScale() {
    const easeFactor = 0.15; // 缓动系数，值越大过渡越快
    const scaleDiff = targetScale - scale;

    // 当差值足够小时，直接到位并停止动画
    if (Math.abs(scaleDiff) < 0.001) {
        scale = targetScale;
        isAnimating = false;
    } else {
        scale += scaleDiff * easeFactor;
        requestAnimationFrame(updateScale);
    }

    // 更新偏移量，保持光标指向的内容位置不变
    position.x = targetCanvasX - targetWorldX * scale;
    position.y = targetCanvasY - targetWorldY * scale;

    // 重绘
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.setTransform(scale, 0, 0, scale, position.x, position.y);
    CANVAS.draw();
}

完整修正代码 #

function scale() {
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    const canvas_width = document.documentElement.scrollWidth;
    const canvas_height = document.documentElement.scrollHeight;

    canvas.addEventListener("wheel", onmousewheel, false);
    canvas.addEventListener("DOMMouseScroll", onmousewheel, false);

    var position = {x: 0, y: 0};
    var scale = 1;
    var targetScale = 1;
    var isAnimating = false;
    var targetCanvasX, targetCanvasY, targetWorldX, targetWorldY;

    function onmousewheel(event) {
        event.preventDefault();
        const rect = canvas.getBoundingClientRect();
        targetCanvasX = event.clientX - rect.left;
        targetCanvasY = event.clientY - rect.top;
        targetWorldX = (targetCanvasX - position.x) / scale;
        targetWorldY = (targetCanvasY - position.y) / scale;

        const delta = event.type === "wheel" ? event.wheelDelta : -event.detail;
        const increment = delta > 0 ? 1.1 : 0.9;
        targetScale *= increment;
        targetScale = Math.max(0.1, Math.min(5, targetScale));

        if (!isAnimating) {
            isAnimating = true;
            requestAnimationFrame(updateScale);
        }
    }

    function updateScale() {
        const easeFactor = 0.15;
        const scaleDiff = targetScale - scale;

        if (Math.abs(scaleDiff) < 0.001) {
            scale = targetScale;
            isAnimating = false;
        } else {
            scale += scaleDiff * easeFactor;
            requestAnimationFrame(updateScale);
        }

        position.x = targetCanvasX - targetWorldX * scale;
        position.y = targetCanvasY - targetWorldY * scale;

        context.clearRect(0, 0, canvas.width, canvas.height);
        context.setTransform(scale, 0, 0, scale, position.x, position.y);
        CANVAS.draw();
    }
}

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