Canvas基于CSS变换的缩放偏移问题求助

你的问题出在鼠标位置映射逻辑错误和缩放原点计算偏差上，当鼠标移动后，旧的位置计算没有考虑缩放对Canvas元素布局的影响，导致缩放时原点偏移。以下是具体修复方案：

核心问题分析 #

1. 原cursorpos函数中，mapcursorposX = windowcursorposX - mapleftposX得到的是缩放后Canvas上的像素位置，不是原始Canvas的坐标，用来计算transform-origin会出错
2. mapleftposX/Y在缩放后直接用getBoundingClientRect()获取，但此时Canvas已经被缩放，这个位置是缩放后的偏移，无法用于后续原始坐标计算
3. 缩放原点应该基于原始Canvas坐标系中的鼠标位置，而不是缩放后的位置

修复步骤 #

1. 正确计算鼠标在原始Canvas的坐标 #

重写cursorpos函数，通过Canvas的getBoundingClientRect()和当前缩放级别，反推出鼠标在原始Canvas上的位置：

function cursorpos(e) {
    const rect = citycanvas.getBoundingClientRect();
    // 计算鼠标相对于Canvas元素的偏移（缩放后的像素）
    const scaledX = e.clientX - rect.left;
    const scaledY = e.clientY - rect.top;
    // 反推原始Canvas坐标：缩放后的像素 / 当前缩放级别
    mapcursorposX = scaledX / Zoomlevel;
    mapcursorposY = scaledY / Zoomlevel;
}

2. 修正缩放原点与位置更新逻辑 #

在缩放事件中，基于原始Canvas坐标设置transform-origin，并调整Canvas的偏移位置，确保鼠标指向的内容始终在原地：

citycanvas.addEventListener('wheel', (e) => {
    e.preventDefault();
    cursorpos(e);

    const delta = e.deltaY > 0 ? -1 : 1;
    let newZoomLevel = Zoomlevel - (delta * Zoomfaktor);
    newZoomLevel = Math.max(min_Faktor, Math.min(max_Faktor, newZoomLevel));

    if (newZoomLevel !== Zoomlevel) {
        const rect = citycanvas.getBoundingClientRect();
        
        // 计算偏移量，保证鼠标指向的原始坐标位置不变
        const offsetX = (e.clientX - rect.left) - (mapcursorposX * newZoomLevel);
        const offsetY = (e.clientY - rect.top) - (mapcursorposY * newZoomLevel);
        
        citycanvas.style.transformOrigin = `${mapcursorposX}px ${mapcursorposY}px`;
        citycanvas.style.transform = `scale(${newZoomLevel})`;
        citycanvas.style.left = `${rect.left + offsetX}px`;
        citycanvas.style.top = `${rect.top + offsetY}px`;

        Zoomlevel = newZoomLevel;
    }
});

3. 初始化Canvas位置 #

在HTML的CSS中，给Canvas初始的left和top值，确保位置计算从0开始：

#citycanvas {
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: top left;
    background-color: green;
    overflow: hidden;
}

完整修正代码 #

JavaScript #

const container = document.getElementById('container');
const citycanvas = document.getElementById('citycanvas');
const citycontext = citycanvas.getContext('2d');

// 绘制山脉的函数
function drawMountains(context) {
    const gradient = context.createLinearGradient(0, 0, 0, 400);
    gradient.addColorStop(0, "#000000");
    gradient.addColorStop(1, "#000000");
    context.fillStyle = gradient;

    context.beginPath();
    let startX = 200;
    let startY = 400;
    let width = 300;
    let height = 200;
    context.moveTo(startX, startY);
    context.lineTo(startX + width / 2, startY - height);
    context.lineTo(startX + width, startY);
    context.lineTo(startX, startY);

    let mountainData = [
        { startX: 500, startY: 400, width: 250, height: 150 },
        { startX: 800, startY: 400, width: 350, height: 250 },
        { startX: 1100, startY: 400, width: 200, height: 100 }
    ];

    mountainData.forEach(mountain => {
        context.moveTo(mountain.startX, mountain.startY);
        context.lineTo(mountain.startX + mountain.width / 2, mountain.startY - mountain.height);
        context.lineTo(mountain.startX + mountain.width, mountain.startY);
        context.lineTo(mountain.startX, mountain.startY);
    });

    context.closePath();
    context.fill();
}

drawMountains(citycontext);

let Zoomfaktor = 0.05;
const min_Faktor = 0.3;
const max_Faktor = 1.0;
let Zoomlevel = 1.0;
let mapcursorposX = 0;
let mapcursorposY = 0;

// 确定鼠标在地图上的位置（原始Canvas坐标）
function cursorpos(e) {
    const rect = citycanvas.getBoundingClientRect();
    const scaledX = e.clientX - rect.left;
    const scaledY = e.clientY - rect.top;
    mapcursorposX = scaledX / Zoomlevel;
    mapcursorposY = scaledY / Zoomlevel;
}

// 鼠标移动时更新位置
citycanvas.addEventListener('mousemove', (e) => {
    cursorpos(e);
});

// 缩放函数
citycanvas.addEventListener('wheel', (e) => {
    e.preventDefault();
    cursorpos(e);

    const delta = e.deltaY > 0 ? -1 : 1;
    let newZoomLevel = Zoomlevel - (delta * Zoomfaktor);
    newZoomLevel = Math.max(min_Faktor, Math.min(max_Faktor, newZoomLevel));

    if (newZoomLevel !== Zoomlevel) {
        const rect = citycanvas.getBoundingClientRect();
        
        // 计算偏移量，保证鼠标指向的原始坐标位置不变
        const offsetX = (e.clientX - rect.left) - (mapcursorposX * newZoomLevel);
        const offsetY = (e.clientY - rect.top) - (mapcursorposY * newZoomLevel);
        
        citycanvas.style.transformOrigin = `${mapcursorposX}px ${mapcursorposY}px`;
        citycanvas.style.transform = `scale(${newZoomLevel})`;
        citycanvas.style.left = `${rect.left + offsetX}px`;
        citycanvas.style.top = `${rect.top + offsetY}px`;

        Zoomlevel = newZoomLevel;
    }
});

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Zoom</title>
    <style>
        html, body {
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        #container {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            position: relative;
            background-color: lightgrey;
        }
        #citycanvas {
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: top left;
            background-color: green;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="container">
        <canvas id="citycanvas" width="12600" height="9600"></canvas>
    </div>
    <script src="zoom.js"></script>
</body>
</html>

关键说明 #

• 始终基于原始Canvas坐标系计算鼠标位置，不受缩放影响
• 缩放时通过调整Canvas的left/top偏移，抵消缩放带来的位置变化，保证鼠标指向的内容固定
• 严格遵循你要求的缩放步长0.05，以及0.3-1.0的缩放范围

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