Flutter CustomPaint图形选中异常与线段触点命中判定问题

矩形、圆形偶发选中失败的根因与修复 #

Rect.contains()偶发漏判基本是以下三类问题导致，按优先级排查：

• 坐标体系不匹配：手势返回的全局物理坐标、画布变换后的逻辑坐标、Shape类存储的原始绘制坐标未做统一转换。如果你的白板支持缩放、平移，或者GestureDetector与CustomPainter之间嵌套了Transform、Padding这类会改变坐标映射的组件，直接拿手势触点坐标和图形的原始bounds做判定，必然会出现位置偏移导致漏判。
  修复方案：命中判断前先做坐标反变换，将手势拿到的全局坐标通过画布的变换矩阵反向映射为画布逻辑坐标，再传入所有命中判断逻辑。
• 遍历顺序与变换适配问题：如果按图形绘制的正序遍历做命中判断，后绘制的高层级图形会被先绘制的低层级图形抢占判定结果；如果图形支持旋转，原生Rect.contains()仅支持轴对齐矩形判定，旋转后图形的实际可见区域和外接矩形不重合，也会出现点中图形内部判定失败的问题。
  修复方案：命中判断时倒序遍历图形列表（最后绘制的图形层级最高，优先判定）；如果图形存在旋转、斜切等非平移变换，先将触点坐标做反向变换对齐图形本地坐标系，再做区域判定。
• 触摸精度问题：手指触摸存在天然的接触面积误差，严格按1像素精度判定很容易出现漏判。
  修复方案：所有图形的命中判定区域外扩10-15逻辑像素的容差，先通过外扩后的外接矩形做粗筛，再走精准判定逻辑，能覆盖90%以上的偶发漏判场景。

圆形拖拽后显示异常的根因与修复 #

这类问题基本是绘制逻辑和数据更新逻辑不一致导致，常见触发点：

• 绘制时临时加了坐标偏移：比如绘制圆形时手动给圆心坐标加了描边宽度一半的偏移、或者对齐偏移，但拖拽更新圆心坐标时没有同步加对应偏移，会导致拖拽时圆形位置跳变、残影。
  修复方案：保证Shape类存储的圆心坐标和canvas.drawCircle传入的圆心参数完全一致，所有绘制偏移统一收敛到Paint参数或者Shape的变换属性中，不要在draw方法里临时修改坐标值。
• 重绘范围不完整：CustomPainter重绘时没有正确触发脏区域更新，或者开启了图形离屏缓存但拖拽时没有清除旧位置的缓存，会出现圆形拖尾、新旧位置同时显示的问题。
  修复方案：拖拽过程中每次更新图形坐标后主动触发setState，临时关闭图形缓存，确认CustomPainter的shouldRepaint方法在拖拽场景下返回true。
• 拖拽逻辑误改半径参数：如果圆形是通过拖拽两点生成（按下点为圆心，移动点算半径），位移拖拽时错误地联动修改了半径值，会出现圆形拖拽时大小不停变化的异常。
  修复方案：纯位移拖拽场景下只更新圆心坐标的偏移量，保持半径值恒定，仅在缩放调整模式下修改半径参数。

线段、箭头类图形的触点命中判定实现 #

不要直接用外接矩形做线段命中判定，按「粗筛+精准距离判定」的逻辑实现即可：

1. 粗筛阶段：生成线段的轴对齐外接矩形，外扩15逻辑像素容差，先用Rect.contains()判断触点是否在粗筛范围内，不在直接返回未命中，减少不必要的计算。
2. 精准判定阶段：计算触点到线段的最短距离，若距离小于设定的触摸容差（推荐10-15逻辑像素，适配手指触摸精度），且触点在线段上的投影落在两个端点的区间内，即判定为命中。
   核心判定代码（Flutter环境可直接复用）：

   /// 判断触点是否命中线段
   /// [p1][p2] 线段两端点，[touchPoint] 经过坐标转换的触点
   /// [tolerance] 触摸容差，单位逻辑像素
   bool hitTestLine(Offset p1, Offset p2, Offset touchPoint, {double tolerance = 12}) {
     // 线段方向向量
     final double dirX = p2.dx - p1.dx;
     final double dirY = p2.dy - p1.dy;
     // 线段长度平方，避免开根号计算损耗
     final double lenSq = dirX * dirX + dirY * dirY;
     // 处理两端点重合的退化线段，直接判断点到点距离
     if (lenSq == 0) {
       return (touchPoint - p1).distance <= tolerance;
     }
     // 计算触点投影在线段上的占比参数t，钳制在0-1区间保证投影不超出线段范围
     final double t = ((touchPoint.dx - p1.dx) * dirX + (touchPoint.dy - p1.dy) * dirY) / lenSq;
     final double clampedT = t.clamp(0.0, 1.0);
     // 计算线段上距离触点最近的点
     final Offset nearest = Offset(
       p1.dx + clampedT * dirX,
       p1.dy + clampedT * dirY
     );
     // 最近点与触点距离小于容差即命中
     return (touchPoint - nearest).distance <= tolerance;
   }
   

3. 箭头类图形的命中判定可在线段判定的基础上，补充箭头头部三角形的区域判定：触点命中箭杆线段、或者落在箭头三角形范围内，即可判定为选中。

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