PictureBox裁剪区域显示不一致问题求助

核心原因 #

问题出在控件坐标与图像原始像素坐标未做转换：

• 当图像尺寸与PictureBox控件尺寸不一致，或处于高DPI缩放环境时，控件上的鼠标坐标、绘制矩形坐标，和图像的原始像素坐标存在偏移/比例差异
• 裁剪直接使用控件坐标操作图像像素，导致区域错位；同时在pictureBox1中错误使用原始图像矩形绘制裁剪后的小图，引发显示变形

分步解决方案 #

1. 实现坐标转换工具方法 #

添加方法将控件坐标转换为图像原始像素坐标，同时处理高DPI缩放影响：

private Point ConvertControlPointToImagePixel(PictureBox pb, Point controlPoint)
{
    if (pb.Image == null) return Point.Empty;

    using (Graphics g = pb.CreateGraphics())
    {
        g.PageUnit = GraphicsUnit.Pixel;
        Matrix transform = g.Transform;
        transform.Invert();
        Point[] points = { controlPoint };
        transform.TransformPoints(points);
        return points[0];
    }
}

private Rectangle ConvertControlRectToImagePixelRect(PictureBox pb, Rectangle controlRect)
{
    Point location = ConvertControlPointToImagePixel(pb, controlRect.Location);
    Point bottomRight = ConvertControlPointToImagePixel(pb, controlRect.Location + controlRect.Size);
    return Rectangle.FromLTRB(location.X, location.Y, bottomRight.X, bottomRight.Y);
}

2. 修改矩形绘制的坐标逻辑 #

确保DrawingRects中存储的是图像原始像素坐标，绘制时再转换为控件坐标：

// 改写DrawShapes方法，添加PictureBox参数用于坐标转换
private void DrawShapes(Graphics g, PictureBox pb)
{
    if (DrawingRects.Count == 0 || pb.Image == null) return;
    g.SmoothingMode = SmoothingMode.AntiAlias;
    
    Matrix transform = g.Transform;
    foreach (var dr in DrawingRects)
    {
        if (dr.Rect.Width > 0 && dr.Rect.Height > 0)
        {
            Rectangle[] rects = { dr.Rect };
            transform.TransformRectangles(rects);
            using (Pen pen = new Pen(dr.DrawingcColor, dr.PenSize))
            {
                g.DrawRectangle(pen, rects[0]);
            };
        }
    }
}

// 更新pictureBox2_Paint事件
private void pictureBox2_Paint(object sender, PaintEventArgs e)
{
    if (drawBorder)
    {
        ControlPaint.DrawBorder(e.Graphics, pictureBox2.ClientRectangle, Color.Red, ButtonBorderStyle.Solid);
    }

    if (pictureBox2.Image != null && selectedPath != null && DrawingRects.Count > 0)
    {
        DrawShapes(e.Graphics, pictureBox2);
    }
}

3. 修正鼠标事件的坐标记录 #

在MouseDown/MouseMove中，将控件坐标转换为图像像素坐标后再记录矩形：

// MouseDown事件示例
private void pictureBox2_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button != MouseButtons.Left) return;
    Point imagePoint = ConvertControlPointToImagePixel(pictureBox2, e.Location);
    if (imagePoint.IsEmpty) return;
    DrawingRects.Add(new DrawingRect { Rect = new Rectangle(imagePoint, Size.Empty) });
}

// MouseMove事件示例
private void pictureBox2_MouseMove(object sender, MouseEventArgs e)
{
    if (e.Button != MouseButtons.Left || DrawingRects.Count == 0) return;
    Point imagePoint = ConvertControlPointToImagePixel(pictureBox2, e.Location);
    if (imagePoint.IsEmpty) return;
    
    var lastRect = DrawingRects.Last();
    int x = Math.Min(lastRect.Rect.X, imagePoint.X);
    int y = Math.Min(lastRect.Rect.Y, imagePoint.Y);
    int width = Math.Abs(lastRect.Rect.X - imagePoint.X);
    int height = Math.Abs(lastRect.Rect.Y - imagePoint.Y);
    lastRect.Rect = new Rectangle(x, y, width, height);
    pictureBox2.Invalidate();
}

4. 优化裁剪方法 #

添加范围检查，使用更准确的DrawImage重载：

public Bitmap cropAtRect(Bitmap b, Rectangle r)
{
    // 确保裁剪区域在图像范围内
    r.Intersect(new Rectangle(0, 0, b.Width, b.Height));
    if (r.Width <= 0 || r.Height <= 0) return null;
    
    Bitmap nb = new Bitmap(r.Width, r.Height);
    using (Graphics g = Graphics.FromImage(nb))
    {
        g.InterpolationMode = InterpolationMode.HighQualityBicubic;
        // 指定源图像区域和目标图像区域，确保裁剪准确
        g.DrawImage(b, new Rectangle(0, 0, nb.Width, nb.Height), r, GraphicsUnit.Pixel);
        return nb;
    }
}

5. 修正pictureBox1的显示逻辑 #

裁剪后的图像直接按Normal模式在pictureBox1左上角显示，无需使用原始图像的矩形坐标：

private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    if (drawBorder)
    {
        ControlPaint.DrawBorder(e.Graphics, pictureBox1.ClientRectangle, Color.Red, ButtonBorderStyle.Solid);
    }
    if (rectImage != null)
    {
        // Normal模式下直接绘制裁剪后的图像
        e.Graphics.DrawImage(rectImage, 0, 0);
        
        if (clearRectangles)
        {
            DrawingRects.Clear();
            pictureBox2.Invalidate();
        }
    }
}

6. 修复MouseUp事件的范围检查 #

改为检查图像像素坐标的有效性：

private void pictureBox2_MouseUp(object sender, MouseEventArgs e)
{
    if (e.Button != MouseButtons.Left) return;
    if (DrawingRects.Count > 0 && pictureBox2.Image != null && selectedPath != null)
    {
        var dr = DrawingRects.Last();
        Rectangle imageBounds = new Rectangle(0, 0, pictureBox2.Image.Width, pictureBox2.Image.Height);
        
        if (imageBounds.Contains(dr.Rect) && dr.Rect.Width > 0 && dr.Rect.Height > 0)
        {
            rectImage = cropAtRect((Bitmap)pictureBox2.Image, dr.Rect);
            if (saveRectangles)
            {
                rectangleName = GetNextName(Path.Combine(selectedPath, "Rectangle"), ".bmp"); 
                FileList.Add($"{dr.Rect.Location}, {dr.Rect.Size}", rectangleName);
                string json = JsonConvert.SerializeObject(
                    FileList,
                    Formatting.Indented
                );
                using (StreamWriter sw = new StreamWriter(Path.Combine(selectedPath, "rectangles.txt"), false))
                {
                    sw.Write(json);
                }

                rectImage.Save(rectangleName);
                saveRectanglesCounter++;
            }
            pixelsCounter = dr.Rect.Width * dr.Rect.Height;

            pictureBox1.Invalidate();
            
            listBox1.DataSource = FileList.Keys.ToList();
            listBox1.SelectedIndex = listBox1.Items.Count - 1;

            pictureBox2.Focus();
        }
        else
        {
            if (clearRectangles)
            {
                DrawingRects.Clear();
                pictureBox2.Invalidate();
            }
        }
    }
}

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