如何让PictureBox上指定位置的矩形随缩放始终覆盖对应城市名称

问题核心原因 #

你当前的缩放逻辑直接基于PictureBox控件的整体宽高计算，未考虑SizeMode = Zoom时图片是等比缩放后居中渲染的，控件边缘会出现空白区域，且原始比例是基于控件初始尺寸而非原图尺寸计算，缩放后必然错位。

修复步骤 #

• 第一步：将初始矩形的坐标、尺寸统一换算为相对于原始地图图片的比例，该比例为固定值，不受控件尺寸影响
• 第二步：新增方法计算Zoom模式下图片在控件内的实际渲染偏移量和缩放系数
• 第三步：每次控件尺寸变化时，根据实际渲染参数重新计算矩形的实时坐标和尺寸

修改后的完整代码 #

Form1 部分 #

public partial class Form1 : Form
{
    // 存储原始图片上的矩形坐标（基于原始图片像素）
    private MyRectangle origRect = new MyRectangle("Kiel", 885, 124, 51, 18);
    // 存储矩形相对于原始图片的固定比例
    private float origXRatio, origYRatio, origWidthRatio, origHeightRatio;
    // 实时使用的矩形对象
    private MyRectangle rect = new MyRectangle("Kiel", 0,0,0,0);

    public Form1()
    {
        InitializeComponent();
        // 确保PictureBox属性设置正确
        pictureBox1.SizeMode = PictureBoxSizeMode.Zoom;
        pictureBox1.Dock = DockStyle.Fill;
    }

    private void Form1_Load(object sender, EventArgs e)
    {
        // 图片加载完成后计算原始比例，不要放在构造函数中执行
        if (pictureBox1.Image == null) return;
        Image originalImg = pictureBox1.Image;
        origXRatio = origRect.X / (float)originalImg.Width;
        origYRatio = origRect.Y / (float)originalImg.Height;
        origWidthRatio = origRect.Width / (float)originalImg.Width;
        origHeightRatio = origRect.Height / (float)originalImg.Height;
        // 初始化时更新一次矩形位置
        UpdateRectPosition();
    }

    private void pictureBox1_Resize(object sender, EventArgs e)
    {
        // 控件尺寸变化时同步更新矩形
        UpdateRectPosition();
    }

    /// <summary>
    /// 计算Zoom模式下图片的实际渲染参数，更新矩形坐标和尺寸
    /// </summary>
    private void UpdateRectPosition()
    {
        if (pictureBox1.Image == null) return;
        Image originalImg = pictureBox1.Image;
        int ctrlWidth = pictureBox1.ClientSize.Width;
        int ctrlHeight = pictureBox1.ClientSize.Height;

        // 计算Zoom模式的实际缩放比
        float zoomFactor = Math.Min((float)ctrlWidth / originalImg.Width, (float)ctrlHeight / originalImg.Height);
        // 计算图片实际渲染的宽高
        float renderWidth = originalImg.Width * zoomFactor;
        float renderHeight = originalImg.Height * zoomFactor;
        // 计算图片居中渲染的偏移量（留白区域的大小）
        float offsetX = (ctrlWidth - renderWidth) / 2;
        float offsetY = (ctrlHeight - renderHeight) / 2;

        // 更新矩形的实时坐标和尺寸
        rect.X = (int)(offsetX + origXRatio * renderWidth);
        rect.Y = (int)(offsetY + origYRatio * renderHeight);
        rect.Width = (int)(origWidthRatio * renderWidth);
        rect.Height = (int)(origHeightRatio * renderHeight);
    }

    // 鼠标悬停检测示例
    private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
    {
        if (rect.Contains(e.X, e.Y))
        {
            // 此处实现弹窗展示城市信息逻辑
            toolTip1.Show(rect.Name, pictureBox1, e.Location);
        }
        else
        {
            toolTip1.Hide(pictureBox1);
        }
    }
}

MyRectangle 部分 #

原有代码不需要修改，直接复用即可。

扩展说明 #

如果需要支持多个城市标记，只需将所有城市的原始矩形存入List<MyRectangle>集合，更新坐标时遍历集合批量计算即可。

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