Kotlin中如何在ImageView上绘制目标检测bounding box矩形？

错位问题的核心成因：检测模型输出的 bounding box 坐标是基于模型输入的原始图片坐标系，而 ImageView 会根据设置的 scaleType、图片实际尺寸、View 自身尺寸做缩放、平移甚至旋转变换，两个坐标系没有做统一映射，直接绘制就会出现框体和目标错位、比例失调，和现有实现的错位表现、期望的对齐效果差异完全匹配。

推荐实现方案 #

1. 自定义继承ImageView的绘制组件（适配性最好，开发量最小） #

这是最通用的实现方式，不需要额外调整布局层级，具体步骤：

• 坐标映射逻辑：在拿到ImageMatrix之后，通过系统矩阵做坐标转换，不要手动计算缩放比：
• 获取ImageView的imageMatrix实例，调用matrix.getValues()拿到矩阵变换数组，把模型输出的bbox四个顶点（左上x/y、右上x/y、右下x/y、左下x/y）组成的浮点数组，传入Matrix.mapPoints()方法，一次性把所有坐标转换为View坐标系下的实际位置
• 注意如果ImageView设置了padding，要在映射完成后的坐标上叠加对应方向的padding偏移，避免整体偏移
• 绘制逻辑：重写自定义View的onDraw方法：
• 用抗锯齿的Paint调用canvas.drawRect()绘制转换后的矩形边框，线宽根据View的实际显示密度适配，不要硬编码像素值
• 如果需要绘制物体类别、置信度标签，在矩形框的左上角位置预留适当空间绘制文本，不要遮挡核心检测目标
• 触发时机：等图片完全加载完成、拿到最终稳定的ImageMatrix之后再触发重绘，避免异步加载过程中矩阵未初始化导致的坐标错误

2. 独立透明Overlay覆盖层（适合带交互的场景） #

如果需要对绘制的bounding box做点击、长按、拖拽等交互操作，可以采用分层布局：

• 在外层用FrameLayout包裹ImageView，在ImageView上层叠一个和ImageView尺寸、边距完全一致的透明自定义View
• 把坐标映射、框体绘制的逻辑全部放在这个透明Overlay View里，好处是绘制逻辑和ImageView本身的图片加载、手势缩放逻辑完全解耦，不会出现手势操作图片时框体不跟随的问题

常见踩坑提醒 #

• 不要手动根据图片尺寸和View尺寸计算缩放比例：这种方式在scaleType动态切换、图片带EXIF旋转信息、使用centerCrop裁剪模式的时候很容易计算错误，直接复用系统生成的ImageMatrix做映射是零误差的方案
• 不要把bbox绘制到顶层DecorView上：如果后续给图片增加双指缩放、平移的交互，DecorView层的绘制内容不会跟着图片的变换动态更新，会直接错位
• 绘制时要做边界裁剪：映射后的坐标可能存在超出View边界的情况，用canvas.clipRect()把绘制范围限制在ImageView的显示区域内，避免框体画出View范围

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