PictureBox中快速拖动绘制矩形尺寸异常的修复咨询

问题描述 #

在PictureBox控件内快速拖动鼠标绘制矩形时，若鼠标移出控件区域，矩形会中途停在控件对应方向的边缘，最终生成的矩形大小不符合预期。此前尝试通过MouseEnter事件锁定鼠标在窗体范围内，但效果不佳。

问题根源 #

当前代码的MouseMove事件仅在鼠标处于PictureBox客户端范围内时才更新矩形尺寸。当鼠标移出控件后，MouseMove事件不再触发（或触发但坐标校验不通过），导致矩形无法跟随鼠标拖动的方向继续更新尺寸。

解决方案 #

通过全局监听鼠标移动消息，即使鼠标移出PictureBox也能获取其位置，再将坐标限制在控件有效范围内，确保矩形能正确跟随鼠标拖动的方向更新。具体步骤：

1. 鼠标按下时注册全局鼠标移动消息过滤器；
2. 在全局鼠标移动回调中，将屏幕坐标转换为PictureBox客户端坐标，并限制坐标范围；
3. 鼠标释放时移除消息过滤器，停止全局监听。

修改后的代码 #

1. 添加全局鼠标消息过滤器类 #

public class MouseMoveFilter : IMessageFilter
{
    private const int WM_MOUSEMOVE = 0x0200;
    private readonly Action<Point> _mouseMoveCallback;

    public MouseMoveFilter(Action<Point> mouseMoveCallback)
    {
        _mouseMoveCallback = mouseMoveCallback;
    }

    public bool PreFilterMessage(ref Message m)
    {
        if (m.Msg == WM_MOUSEMOVE)
        {
            _mouseMoveCallback?.Invoke(Control.MousePosition);
        }
        return false;
    }
}

2. 在窗体类中添加私有变量 #

private MouseMoveFilter _mouseMoveFilter;

3. 修改MouseDown事件 #

private void pictureBoxImageToCrop_MouseDown(object sender, MouseEventArgs e)
{
    if (e.Button != MouseButtons.Left || crop == false) return;

    x = 0;
    y = 0;

    if (pictureBoxImageToCrop.Image != null && selectedPath != null)
    {
        if (!isRealTimeCropping)
        {
            Point clientPos = e.Location;
            // 校验起始点在图像范围内
            if (clientPos.X >= 0 && clientPos.X <= pictureBoxImageToCrop.Image.Size.Width &&
                clientPos.Y >= 0 && clientPos.Y <= pictureBoxImageToCrop.Image.Size.Height)
            {
                DrawingRects.Add(new DrawingRectangle()
                {
                    Location = clientPos,
                    Size = Size.Empty,
                    StartPosition = clientPos,
                    Owner = (Control)sender,
                    DrawingcColor = SelectedColor
                });

                // 注册全局鼠标移动监听
                _mouseMoveFilter = new MouseMoveFilter(OnGlobalMouseMove);
                Application.AddMessageFilter(_mouseMoveFilter);
            }
        }
        else
        {
            pictureBoxCroppedImages.Image = null;
        }
    }
}

4. 添加全局鼠标移动处理方法 #

private void OnGlobalMouseMove(Point screenPos)
{
    if (!isRealTimeCropping && crop && DrawingRects.Count > 0)
    {
        // 转换屏幕坐标为PictureBox客户端坐标
        Point clientPos = pictureBoxImageToCrop.PointToClient(screenPos);

        // 将坐标限制在PictureBox有效范围内
        int clampedX = Math.Max(0, Math.Min(clientPos.X, pictureBoxImageToCrop.Width));
        int clampedY = Math.Max(0, Math.Min(clientPos.Y, pictureBoxImageToCrop.Height));

        x = clampedX;
        y = clampedY;

        var dr = DrawingRects[DrawingRects.Count - 1];
        // 计算矩形的位置和尺寸
        int rectX = Math.Min(dr.StartPosition.X, clampedX);
        int rectY = Math.Min(dr.StartPosition.Y, clampedY);
        int rectWidth = Math.Abs(dr.StartPosition.X - clampedX);
        int rectHeight = Math.Abs(dr.StartPosition.Y - clampedY);

        dr.Location = new Point(rectX, rectY);
        dr.Size = new Size(rectWidth, rectHeight);

        pictureBoxImageToCrop.Invalidate();
    }
}

5. 修改MouseMove事件 #

移除原有的矩形更新逻辑，保留实时裁剪和光标设置：

private void pictureBoxImageToCrop_MouseMove(object sender, MouseEventArgs e)
{
    int X = e.X;
    int Y = e.Y;

    label1.Text = $"{X} - {Y}";

    if (e.Button != MouseButtons.Left || crop == false) return;

    this.Cursor = Cursors.Cross;

    if (isRealTimeCropping)
    {
        realTimeCursorPos = new Point(e.X - cropRectWidth / 2, e.Y - cropRectHeight / 2);
        Rectangle cropRect = new Rectangle(realTimeCursorPos.X, realTimeCursorPos.Y, cropRectWidth, cropRectHeight);
        realTimeCroppedImage = cropAtRect((Bitmap)pictureBoxImageToCrop.Image, cropRect);
        pictureBoxCroppedImages.Invalidate();
    }
}

6. 修改MouseUp事件 #

添加移除全局监听的逻辑，并修正部分变量引用：

int count = 0;
private void pictureBoxImageToCrop_MouseUp(object sender, MouseEventArgs e)
{
    if (e.Button != MouseButtons.Left || crop == false) return;

    // 移除全局鼠标监听
    if (_mouseMoveFilter != null)
    {
        Application.RemoveMessageFilter(_mouseMoveFilter);
        _mouseMoveFilter = null;
    }

    if (DrawingRects.Count > 0 && pictureBoxImageToCrop.Image != null && selectedPath != "")
    {
        if (x >= 0 && x <= pictureBoxImageToCrop.Image.Size.Width &&
            y >= 0 && y <= pictureBoxImageToCrop.Image.Size.Height)
        {
            var dr = DrawingRects.Last();
            if (dr.Rect.Width > 0 && dr.Rect.Height > 0)
            {
                rectImage = cropAtRect((Bitmap)pictureBoxImageToCrop.Image, dr.Rect);

                if (saveRectangles)
                {
                    count++;
                    rectangleName = GetNextName(Path.Combine(selectedPath, "Rectangle"), ".bmp");
                    FileList.Add($"{dr.Location}, {dr.Size}", rectangleName);
                    string json = JsonConvert.SerializeObject(FileList, Formatting.Indented);
                    using (StreamWriter sw = new StreamWriter(Path.Combine(selectedPath, "rectangles.txt"), false))
                    {
                        sw.WriteLine($"Total number of rectangles: {count}{Environment.NewLine}");
                        sw.Write(json);
                    }

                    rectImage.Save(rectangleName);
                    saveRectanglesCounter++;
                }
                else
                {
                    using (var stream = ToMemoryStream(rectImage))
                    {
                        pictureBoxCroppedImages.Image = System.Drawing.Image.FromStream(stream);
                    }
                }

                pixelsCounter = dr.Rect.Width * dr.Rect.Height;
                pictureBoxCroppedImages.Invalidate();

                var newKey = $"{dr.Location}, {dr.Size}";
                var newItem = new MyListBoxItem
                {
                    Message = $"{newKey},{FileList[newKey]}",
                    ItemColor = Color.Green
                };
                MyItems.Add(newItem);
                listBoxCroppedImages.SelectedIndex = MyItems.Count - 1;
                label2.Text = listBoxCroppedImages.Items.Count.ToString();

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

            x = 0;
            y = 0;
        }
    }

    this.Cursor = Cursors.Default;
}

7. 补充DrawingRectangle类的Rect属性 #

确保DrawingRectangle类能通过Location和Size计算出矩形：

public class DrawingRectangle
{
    // 原有属性
    public Point Location { get; set; }
    public Size Size { get; set; }
    public Point StartPosition { get; set; }
    public Control Owner { get; set; }
    public Color DrawingcColor { get; set; }

    // 添加只读属性
    public Rectangle Rect => new Rectangle(Location, Size);
}

注意事项 #

• 原代码中MouseDown事件里的x、y初始值为0，校验逻辑存在错误，已修正为使用鼠标按下时的客户端坐标；
• MouseUp事件中原rect变量未定义，已替换为dr.Rect；
• 使用using语句管理流对象，避免资源泄漏。

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