AI Agent 屏幕绘图指南：用代码绘制可视化箭头和文本

2026/10/103 分钟阅读

AI Agent 屏幕绘图指南：用代码绘制可视化箭头和文本

在构建多模态 AI Agent 时，让模型「看到」屏幕往往只是第一步，更关键的是让它能向用户解释「看到了什么」。通过直接在屏幕上绘制箭头和文本标注，我成功将 Agent 的操作轨迹变成了可视化的调试面板，这比单纯输出日志直观得多。本文分享我在实现这一功能时的具体技术路径，涵盖坐标计算、箭头绘制以及如何叠加文本层的核心代码方案。

解决屏幕坐标与分辨率适配问题

一开始我直接拿 PyAutoGUI 的鼠标位置去画图，结果发现不同分辨率下箭头完全对不齐目标区域。问题的根源在于屏幕截图的坐标系和物理像素并不总是 1:1 对应，特别是在高分屏（HiDPI）设备上，逻辑像素和物理像素存在缩放比例。

我最终的解决方案是引入 Pillow 库进行图像绘制，并在画图前强制获取系统的缩放因子。这样做的好处是，无论你是在 1080P 还是 4K 屏幕上运行，箭头的起点和终点都能精确落在截图的正确位置上。同时，为了避免遮挡住 Agent 正在操作的元素，我选择将绘图结果合成到一个半透明的覆盖层上，而不是直接修改原图。

核心实现：绘制箭头与文本标注

代码实现方面，我依赖 PIL.ImageDraw 来完成所有图形绘制。为了让箭头具有视觉辨识度，我专门写了一个辅助函数来计算箭头的尖端坐标，确保无论箭头指向哪个方向，三角形头部都能正确朝向目标。

下面是一个可运行的最小化示例，展示了如何绘制一条带标签的箭头：

from PIL import Image, ImageDraw, ImageFont
import math

def draw_arrowed_line(draw, start, end, color=(255, 0, 0), width=3, label="Target"):
    # 计算箭头角度和长度
    dx = end[0] - start[0]
    dy = end[1] - start[1]
    angle = math.atan2(dy, dx)
    head_length = 15
    
    # 绘制主线
    draw.line([start, end], fill=color, width=width)
    
    # 绘制箭头头部（等腰三角形）
    p1 = (end[0] - head_length * math.cos(angle - math.pi/6),
          end[1] - head_length * math.sin(angle - math.pi/6))
    p2 = (end[0] - head_length * math.cos(angle + math.pi/6),
          end[1] - head_length * math.sin(angle + math.pi/6))
    draw.polygon([end, p1, p2], fill=color)
    
    # 绘制文本标签
    font = ImageFont.truetype("arial.ttf", 16)
    draw.text((end[0] + 10, end[1] - 20), label, fill=color, font=font)

# 使用示例
img = Image.new('RGB', (800, 600), 'white')
draw = ImageDraw.Draw(img)
draw_arrowed_line(draw, (100, 100), (400, 300), label="点击此处")
img.show()

这段代码的核心在于利用三角函数动态计算箭头尖端的两个辅助点，这样无论 Agent 移动的方向如何，箭头都能保持正确的几何形态。对于文本标注，我将其放置在箭头终点的右上方，避免覆盖住线条本身。

性能优化与图层管理

当 Agent 需要连续绘制多个箭头和文本时，频繁的重绘会导致明显的卡顿。我发现每次操作都重新截图并重绘整个画布是不可接受的。因此，我采用了分层渲染的策略：底层保持原始屏幕截图不变，所有的箭头和文本都绘制在一个独立的透明图层上。

具体做法如下：

缓存基础图像：只在进行屏幕内容更新时才重新截取底图，避免无意义的 I/O 操作。
增量更新：如果只需要移动某个已有的箭头，我只需清空并重绘该部分的图层区域，而不是整个屏幕。
字体资源复用：字体对象（ImageFont）创建成本较高，我在模块加载时初始化一次并全局复用，不要在每次绘制循环中重复创建。

这种架构让我在绘制十几条动态箭头时，帧率依然能保持在 30fps 以上，满足了实时演示的需求。

如果你对视觉反馈还有其他需求，比如高亮特定区域或绘制矩形框，可以参考关于屏幕标注进阶技巧的相关文章，进一步扩展 Agent 的可视化能力。

AI Agent 屏幕绘图指南：用代码绘制可视化箭头和文本