C#鼠标位置图像缩放偏移问题：像素与鼠标无法重合

在C#开发中实现图像缩放时，遇到了鼠标所在像素为中心缩放后，像素位置与鼠标偏移的问题——按逻辑该像素应和鼠标完全重合，但实际缩放后出现错位。

问题现象 #

• 缩放前：
• 缩放后：

原实现代码 #

protected override void OnMouseWheel(MouseEventArgs e)
{
    float tempRatio = 1 / Ratio;

    float delta = 0.1f;
    delta = tempRatio / 5;
    float newRatio = tempRatio + (e.Delta / 120 * delta);
    newRatio = 1 / newRatio;
    if (newRatio < 0.0005 || newRatio > 10) return;
    CalWindowsTranslationAfterZoom(e.Location, newRatio);
    Ratio = newRatio;
    Draw(e.Location);
}

private void CalWindowsTranslationAfterZoom(Point mouse, float ratio)
{
    //get position in canvas
    PointF oldCoord = CoordInCavas(mouse, Ratio);
    //AfterZoom
    PointF newLeftUp = new PointF(-(Width * ratio - _image.Width) / 2,
         -(Height * ratio - _image.Height) / 2);
    PointF deltaLeftUp = new PointF(newLeftUp.X - _leftUp.X, newLeftUp.Y - 
    _leftUp.Y);
    PointF newOriOffset = new PointF(OriginsOffset.X + deltaLeftUp.X, 
     OriginsOffset.Y + deltaLeftUp.Y);
    PointF newCoord = CoordInCavas(mouse, newOriOffset, ratio);

    PointF deviation = new PointF();
    deviation.X = (newCoord.X - oldCoord.X);
    deviation.Y = (newCoord.Y - oldCoord.Y);

    PointF offset = new PointF();
    offset.X = newOriOffset.X - deviation.X;
    offset.Y = newOriOffset.Y - deviation.Y;

    OriginsOffset = offset;
    Ratio = ratio;
}   
//Drawing 
private void Draw(Point mouse)
{
    Graphics g = DoubleBuffered.Graphics;
    g.InterpolationMode = InterpolationMode.NearestNeighbor;

    g.PixelOffsetMode = PixelOffsetMode.Half;
    g.Clear(DoubleBuffered.BackColor);

    if (_image != null)
    {
        g.DrawImage(_image, -OriginsOffset.X / Ratio, -OriginsOffset.Y / Ratio,
           _image.Width / Ratio, _image.Height / Ratio);
        _vGraphics = new VGraphics(this);
        _vGraphics.DrawRectangle(Pens.Green, Rectangle);

    }
}
private PointF CoordInCavas(PointF coordInWindow, float ratio)
{
    PointF coordAfterScale = new PointF(coordInWindow.X * ratio, coordInWindow.Y * 
     ratio);
    PointF coord = new PointF();
    coord.X = coordAfterScale.X + OriginsOffset.X;
    coord.Y = coordAfterScale.Y + OriginsOffset.Y;
    return coord;
}

问题根源与修正方案 #

原代码的核心问题在于CalWindowsTranslationAfterZoom方法的逻辑混乱：引入了窗口居中的newLeftUp计算，和鼠标中心缩放的需求冲突，导致偏移量计算错误。

正确的鼠标中心缩放逻辑应该是：

1. 将鼠标的窗口坐标转换为图像原始坐标（不受缩放、偏移影响）
2. 应用新缩放比例后，反推偏移量，让该原始坐标仍对应鼠标的窗口位置

修正后的关键代码

1. 修正坐标转换方法（更清晰命名）：

// 窗口坐标转图像原始坐标
private PointF WindowToImage(Point windowPos, float currentRatio)
{
    return new PointF(
        windowPos.X * currentRatio + OriginsOffset.X,
        windowPos.Y * currentRatio + OriginsOffset.Y
    );
}

2. 重写偏移量计算方法：

private void CalWindowsTranslationAfterZoom(Point mouse, float newRatio)
{
    // 获取鼠标对应的图像原始坐标（缩放前）
    PointF imageMousePos = WindowToImage(mouse, Ratio);

    // 反推新缩放比例下的偏移量：让原始坐标在新缩放后仍对应鼠标位置
    float newOffsetX = imageMousePos.X - mouse.X * newRatio;
    float newOffsetY = imageMousePos.Y - mouse.Y * newRatio;

    OriginsOffset = new PointF(newOffsetX, newOffsetY);
    Ratio = newRatio;
}

3. 简化滚轮缩放比例计算：

protected override void OnMouseWheel(MouseEventArgs e)
{
    float zoomFactor = e.Delta > 0 ? 1.1f : 0.9f; // 每次滚轮缩放10%
    float newRatio = Ratio * zoomFactor;
    newRatio = Math.Clamp(newRatio, 0.0005f, 10f); // 限制缩放范围
    if (newRatio == Ratio) return;

    CalWindowsTranslationAfterZoom(e.Location, newRatio);
    Draw(e.Location);
}

修正效果 #

修改后，以鼠标所在像素为中心缩放时，该像素会始终与鼠标位置重合，解决偏移问题。

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