C# WinForms：如何识别PictureBox中被点击的OCR单词矩形？

我来给你梳理一个清晰的落地方案，亲测在WinForms里很好用：

1. 先把OCR数据存起来，别画完就丢 #

首先得创建一个简单的类，把每个单词和它的边界矩形绑定在一起，这样后续才能通过点击找到对应关系：

public class OcrWord
{
    // OCR识别出的单词文本
    public string Text { get; set; }
    // 单词在原始图像里的边界矩形（用图像自身的坐标体系）
    public Rectangle Bounds { get; set; }
}

2. 加载OCR结果并绘制矩形 #

调用Google Cloud Vision API拿到结果后，把每个单词转换成OcrWord实例存入全局列表，然后在PictureBox的Paint事件里绘制矩形：

// 全局存储所有OCR单词和矩形的列表
private List<OcrWord> _ocrWords = new List<OcrWord>();

// 替换成你实际处理Google Vision OCR返回数据的逻辑
private void LoadAndParseOcrResults()
{
    _ocrWords.Clear();
    // 这里模拟从API拿到的单词数据，你替换成真实的返回结果即可
    var visionWordResults = /* 你的Google Vision OCR单词集合 */;
    
    foreach (var word in visionWordResults)
    {
        // 把API返回的顶点坐标转换成Rectangle（注意API返回的是图像相对坐标）
        int x = word.BoundingBox.Vertices[0].X;
        int y = word.BoundingBox.Vertices[0].Y;
        int width = word.BoundingBox.Vertices[2].X - x;
        int height = word.BoundingBox.Vertices[2].Y - y;
        
        _ocrWords.Add(new OcrWord
        {
            Text = word.Text,
            Bounds = new Rectangle(x, y, width, height)
        });
    }
    
    // 触发PictureBox重绘所有矩形
    pictureBox1.Invalidate();
}

// PictureBox的Paint事件，负责绘制所有单词的边界矩形
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
    if (_ocrWords.Count == 0) return;
    
    using (Pen redPen = new Pen(Color.Red, 2))
    {
        foreach (var ocrWord in _ocrWords)
        {
            // 关键：如果PictureBox不是Normal模式，要先把图像坐标转换成控件显示坐标
            Rectangle drawRect = ConvertImageRectToPictureBoxRect(ocrWord.Bounds);
            e.Graphics.DrawRectangle(redPen, drawRect);
        }
    }
}

3. 处理点击事件，匹配对应单词 #

核心是把鼠标点击的PictureBox控件坐标转换成原始图像的坐标，然后遍历列表找到包含该点的矩形：

private void pictureBox1_MouseClick(object sender, MouseEventArgs e)
{
    if (_ocrWords.Count == 0) return;
    
    // 把鼠标点击的控件坐标转换成图像自身的坐标
    Point imageClickPoint = ConvertPictureBoxPointToImagePoint(e.Location);
    
    // 遍历找到包含点击点的单词
    var clickedWord = _ocrWords.FirstOrDefault(word => word.Bounds.Contains(imageClickPoint));
    
    if (clickedWord != null)
    {
        // 这里替换成你需要的操作，比如显示单词、高亮选中矩形等
        MessageBox.Show($"你点击了单词：{clickedWord.Text}");
        // 可选：高亮选中的矩形，触发重绘
        _selectedWord = clickedWord;
        pictureBox1.Invalidate();
    }
}

4. 关键工具：坐标转换（适配不同SizeMode） #

因为PictureBox的SizeMode（比如Zoom、StretchImage）会改变图像的显示比例和位置，必须做坐标转换才能保证点击匹配准确：

// 把原始图像的矩形转换成PictureBox中显示的矩形
private Rectangle ConvertImageRectToPictureBoxRect(Rectangle imageRect)
{
    if (pictureBox1.Image == null) return imageRect;
    
    float scaleX = (float)pictureBox1.ClientSize.Width / pictureBox1.Image.Width;
    float scaleY = (float)pictureBox1.ClientSize.Height / pictureBox1.Image.Height;
    
    // 适配Zoom模式：取最小缩放比例，避免拉伸，还要计算偏移量
    if (pictureBox1.SizeMode == PictureBoxSizeMode.Zoom)
    {
        float scale = Math.Min(scaleX, scaleY);
        int offsetX = (pictureBox1.ClientSize.Width - (int)(pictureBox1.Image.Width * scale)) / 2;
        int offsetY = (pictureBox1.ClientSize.Height - (int)(pictureBox1.Image.Height * scale)) / 2;
        
        return new Rectangle(
            (int)(imageRect.X * scale) + offsetX,
            (int)(imageRect.Y * scale) + offsetY,
            (int)(imageRect.Width * scale),
            (int)(imageRect.Height * scale)
        );
    }
    // 适配StretchImage模式：直接按控件和图像的比例缩放
    else if (pictureBox1.SizeMode == PictureBoxSizeMode.StretchImage)
    {
        return new Rectangle(
            (int)(imageRect.X * scaleX),
            (int)(imageRect.Y * scaleY),
            (int)(imageRect.Width * scaleX),
            (int)(imageRect.Height * scaleY)
        );
    }
    // Normal模式：直接返回原矩形
    else
    {
        return imageRect;
    }
}

// 把PictureBox的鼠标点击点转换成原始图像的坐标
private Point ConvertPictureBoxPointToImagePoint(Point pictureBoxPoint)
{
    if (pictureBox1.Image == null) return pictureBoxPoint;
    
    float scaleX = (float)pictureBox1.Image.Width / pictureBox1.ClientSize.Width;
    float scaleY = (float)pictureBox1.Image.Height / pictureBox1.ClientSize.Height;
    
    if (pictureBox1.SizeMode == PictureBoxSizeMode.Zoom)
    {
        float scale = Math.Min((float)pictureBox1.ClientSize.Width / pictureBox1.Image.Width, 
                               (float)pictureBox1.ClientSize.Height / pictureBox1.Image.Height);
        int offsetX = (pictureBox1.ClientSize.Width - (int)(pictureBox1.Image.Width * scale)) / 2;
        int offsetY = (pictureBox1.ClientSize.Height - (int)(pictureBox1.Image.Height * scale)) / 2;
        
        // 先减去控件内的偏移，再按缩放比例还原成图像坐标
        int x = (int)((pictureBoxPoint.X - offsetX) / scale);
        int y = (int)((pictureBoxPoint.Y - offsetY) / scale);
        
        // 确保坐标不会超出图像范围
        x = Math.Clamp(x, 0, pictureBox1.Image.Width - 1);
        y = Math.Clamp(y, 0, pictureBox1.Image.Height - 1);
        
        return new Point(x, y);
    }
    else if (pictureBox1.SizeMode == PictureBoxSizeMode.StretchImage)
    {
        int x = (int)(pictureBoxPoint.X * scaleX);
        int y = (int)(pictureBoxPoint.Y * scaleY);
        x = Math.Clamp(x, 0, pictureBox1.Image.Width - 1);
        y = Math.Clamp(y, 0, pictureBox1.Image.Height - 1);
        return new Point(x, y);
    }
    else
    {
        return pictureBoxPoint;
    }
}

额外优化小技巧 #

• 可以给选中的矩形设置不同的颜色（比如蓝色），在Paint事件里判断是否是当前选中的单词，用不同画笔绘制，交互体验更好。
• 如果OCR识别的单词特别多，遍历查找可以优化成空间索引（比如四叉树），但一般文档场景下直接遍历完全够用。

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