Windows Forms应用中PictureBox实现类谷歌地图标注缩放平移功能

核心解决逻辑：所有标注点仅存储原始图片的相对坐标/原始像素坐标，永远不直接存储控件上的绘制坐标，每次缩放、平移操作后重新计算标注的实际绘制位置。

1. 前置准备 #

首先定义核心状态变量，不要依赖 PictureBox 自带的缩放属性（将 PictureBox 的 SizeMode 设为 Normal，所有绘制逻辑自行控制）：

// 原始图片对象
private Bitmap originalImage;
// 缩放系数，1为原始大小，>1放大 <1缩小
private float zoom = 1.0f;
// 平移偏移量：图片左上角相对于PictureBox控件左上角的坐标
private Point offset = new Point(0, 0);
// 标注点列表，存储对应原始图片的相对坐标（范围0~1），也可以存原始像素坐标
private List<PointF> markers = new List<PointF>();
// 平移相关状态
private bool isDragging = false;
private Point dragStartPos;
private Point dragStartOffset;

2. 坐标转换核心方法 #

实现两个坐标转换方法，是标注固定的核心：

控件坐标转原始图片相对坐标（用于点击加标注、缩放锚点计算） #

private PointF ControlToOriginal(Point controlPoint)
{
    int drawWidth = (int)(originalImage.Width * zoom);
    int drawHeight = (int)(originalImage.Height * zoom);
    // 计算点在当前绘制图片上的相对比例
    float relativeX = (controlPoint.X - offset.X) / (float)drawWidth;
    float relativeY = (controlPoint.Y - offset.Y) / (float)drawHeight;
    // 限制范围避免超出图片边界
    return new PointF(Math.Clamp(relativeX, 0, 1), Math.Clamp(relativeY, 0, 1));
}

3. 重绘逻辑（图片+标注） #

重写 PictureBox 的 Paint 事件，每次操作后触发重绘，动态计算标注位置：

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    if (originalImage == null) return;
    // 高清绘制配置
    e.Graphics.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
    e.Graphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
    // 计算当前图片绘制的宽高
    int drawWidth = (int)(originalImage.Width * zoom);
    int drawHeight = (int)(originalImage.Height * zoom);
    // 绘制底图
    e.Graphics.DrawImage(originalImage, offset.X, offset.Y, drawWidth, drawHeight);
    // 绘制所有标注点
    foreach (var marker in markers)
    {
        // 把原始相对坐标转换为当前控件上的绘制坐标
        float drawX = offset.X + marker.X * drawWidth;
        float drawY = offset.Y + marker.Y * drawHeight;
        // 绘制固定大小的红色标注点（如果需要标注随图片缩放，把10替换为10*zoom即可）
        e.Graphics.FillEllipse(Brushes.Red, drawX - 5, drawY - 5, 10, 10);
    }
}

如果标注点存的是原始图片像素坐标，上述坐标转换逻辑改为：

float drawX = offset.X + marker.X * zoom;
float drawY = offset.Y + marker.Y * zoom;

4. 缩放功能实现 #

以鼠标位置为锚点缩放，和地图操作体验一致：

private void pictureBox1_MouseWheel(object sender, MouseEventArgs e)
{
    if (originalImage == null) return;
    // 先计算缩放前鼠标指向的原始图片坐标，用于缩放后锚点对齐
    PointF originalAnchor = ControlToOriginal(e.Location);
    // 调整缩放系数，可自行修改步长和缩放范围
    zoom += e.Delta > 0 ? 0.1f : -0.1f;
    zoom = Math.Clamp(zoom, 0.1f, 5f);
    // 调整偏移量，保证鼠标指向的位置缩放后不变
    int drawWidth = (int)(originalImage.Width * zoom);
    int drawHeight = (int)(originalImage.Height * zoom);
    offset.X = e.X - (int)(originalAnchor.X * drawWidth);
    offset.Y = e.Y - (int)(originalAnchor.Y * drawHeight);
    // 触发重绘
    pictureBox1.Invalidate();
}

5. 平移功能实现 #

按住鼠标左键拖动平移图片：

// 鼠标按下开始拖动
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        isDragging = true;
        dragStartPos = e.Location;
        dragStartOffset = offset;
    }
    // 右键点击添加标注示例
    else if (e.Button == MouseButtons.Right)
    {
        markers.Add(ControlToOriginal(e.Location));
        pictureBox1.Invalidate();
    }
}
// 鼠标拖动过程中更新偏移
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
    if (isDragging)
    {
        offset.X = dragStartOffset.X + (e.X - dragStartPos.X);
        offset.Y = dragStartOffset.Y + (e.Y - dragStartPos.Y);
        pictureBox1.Invalidate();
    }
}
// 鼠标松开结束拖动
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
    if (e.Button == MouseButtons.Left)
    {
        isDragging = false;
    }
}

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