Python：如何确定目标对象对应的矩形起止点坐标

问题概述 #

我正在做一个小型项目，需要基于目标对象绘制图形，当前核心问题是如何确定矩形的起始点与终点坐标，暂未找到合适的实现方法。

当前效果：

期望效果：

分场景解决方案 #

1. 前端网页场景（JavaScript） #

手动交互框选

通过监听鼠标事件实现坐标采集：

let startPoint = null;
const canvas = document.getElementById('target-canvas');

canvas.addEventListener('mousedown', (e) => {
  // 获取相对于画布的坐标
  const rect = canvas.getBoundingClientRect();
  startPoint = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
});

canvas.addEventListener('mouseup', (e) => {
  if (!startPoint) return;
  const rect = canvas.getBoundingClientRect();
  const endPoint = {
    x: e.clientX - rect.left,
    y: e.clientY - rect.top
  };
  // 确保坐标顺序正确（起点为左上角，终点为右下角）
  const finalStart = {
    x: Math.min(startPoint.x, endPoint.x),
    y: Math.min(startPoint.y, endPoint.y)
  };
  const finalEnd = {
    x: Math.max(startPoint.x, endPoint.x),
    y: Math.max(startPoint.y, endPoint.y)
  };
  // 用finalStart和finalEnd绘制矩形
  drawRectangle(finalStart, finalEnd);
  startPoint = null;
});

自动获取DOM元素坐标

如果目标是页面上的DOM元素，直接调用API获取：

const targetElement = document.getElementById('target-object');
const rect = targetElement.getBoundingClientRect();
const startPoint = { x: rect.left, y: rect.top };
const endPoint = { x: rect.left + rect.width, y: rect.top + rect.height };

2. 计算机视觉场景（Python + OpenCV） #

手动框选目标

利用OpenCV自带的交互工具：

import cv2

img = cv2.imread('target-image.jpg')
# 手动框选，返回 (x, y, w, h)
roi = cv2.selectROI('Select Target', img, False, False)
x, y, w, h = roi
start_point = (x, y)
end_point = (x + w, y + h)

# 绘制矩形并显示
cv2.rectangle(img, start_point, end_point, (0, 255, 0), 2)
cv2.imshow('Result', img)
cv2.waitKey(0)
cv2.destroyAllWindows()

自动识别目标坐标

用YOLO等目标检测模型自动获取bounding box：

from ultralytics import YOLO

model = YOLO('yolov8n.pt')
results = model('target-image.jpg')
# 遍历检测到的目标
for result in results:
    for box in result.boxes:
        x1, y1, x2, y2 = box.xyxy[0].tolist()
        start_point = (int(x1), int(y1))
        end_point = (int(x2), int(y2))
        # 绘制矩形
        cv2.rectangle(result.orig_img, start_point, end_point, (0, 255, 0), 2)
cv2.imshow('Auto Detection Result', results[0].orig_img)
cv2.waitKey(0)

3. 桌面GUI场景（C# WinForms） #

鼠标交互框选

通过控件的鼠标事件实现：

private Point startPoint;
private bool isDrawing = false;
private Rectangle currentRect;

private void panel1_MouseDown(object sender, MouseEventArgs e)
{
    startPoint = e.Location;
    isDrawing = true;
}

private void panel1_MouseMove(object sender, MouseEventArgs e)
{
    if (isDrawing)
    {
        currentRect = new Rectangle(
            Math.Min(startPoint.X, e.X),
            Math.Min(startPoint.Y, e.Y),
            Math.Abs(e.X - startPoint.X),
            Math.Abs(e.Y - startPoint.Y)
        );
        panel1.Invalidate();
    }
}

private void panel1_MouseUp(object sender, MouseEventArgs e)
{
    isDrawing = false;
    // 最终的起始点和终点
    Point start = new Point(currentRect.X, currentRect.Y);
    Point end = new Point(currentRect.X + currentRect.Width, currentRect.Y + currentRect.Height);
    // 使用坐标绘制矩形
}

private void panel1_Paint(object sender, PaintEventArgs e)
{
    if (isDrawing)
    {
        using (Pen pen = new Pen(Color.Red, 2))
        {
            e.Graphics.DrawRectangle(pen, currentRect);
        }
    }
}

通用注意事项 #

• 确认坐标系统原点：多数场景（网页、桌面GUI）原点在左上角，而部分图形库或3D场景原点在左下角，需根据实际情况转换。
• 坐标归一化：如果需要适配不同分辨率，可将坐标转换为相对比例（比如相对于画布/图像的宽高）。

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