如何检测考虑描边宽度与填充的SVG路径相交情况

此前针对SVG非矩形图形重叠判定的相关问题已有不少基础解答，但这类方案普遍没有把描边宽度、填充规则纳入计算逻辑，无法覆盖手写工具类场景的判定需求。

现有方案的失效场景 #

现有常用的路径中心线相交计算方法，在以下三类手写工具场景下会出现漏判：

• 自定义宽度橡皮擦场景：橡皮擦路径为带宽度的描边，和待擦除手写笔迹已经产生视觉重叠，但纯中心线相交算法无法识别这类相交
  
• 剪刀工具填充重叠场景：图形填充范围和内部路径发生重叠，需要判定为相交
  
• 剪刀工具跨区域重叠场景：路径跨图形边界产生视觉重叠，同样属于需要识别的相交情况
  

核心需求 #

• 基础能力：单SVG根节点下挂载若干path元素，支持遍历所有路径，判定任意两个路径的实际渲染范围是否相交
• 进阶能力：支持为路径绑定状态监听，实时感知路径与其他元素的相交状态变化

可落地方案 #

方案一：离屏Canvas像素判定（实现成本最低，100%匹配渲染效果） #

这是最省事的方案，完全不需要写复杂的几何计算逻辑，判定结果和用户看到的视觉效果完全一致，不会漏判描边、填充产生的重叠：

1. 初始化阶段为每个path创建一个和SVG等尺寸的离屏Canvas，将path按照当前实际样式（包括描边宽度、线帽、线连接方式、填充色、填充规则所有视觉属性）绘制到对应的离屏画布上，缓存画布的像素数据
2. 两两做相交判定时，先用getBBox()做粗筛：如果两个路径的包围盒完全没有重叠，直接判定为不相交；如果包围盒有重叠，再取两个路径对应画布的像素缓冲区，遍历重叠区域内的像素点，只要存在同一个坐标下两个路径的像素alpha值都大于0，就判定为相交
3. 要实现实时相交监听，只需要给path绑定形状、属性变化的回调（手写场景下就是绘制过程中的path更新事件、样式修改事件），每次变化时重绘对应离屏Canvas的像素缓存，重新执行相交校验，状态变化时触发自定义事件即可

性能提示：常规手写应用场景下（单页几百个path以内），加了包围盒粗筛的像素检测完全可以做到实时响应，不会有卡顿问题；如果对精度要求极高，记得把离屏Canvas的尺寸乘以当前设备像素比，避免高DPI屏幕下的判定误差。

方案二：轮廓转多边形几何判定（性能更高，适合超大量路径场景） #

如果单页路径量级超过一千，像素检测的性能开销会上升，可以用几何计算的方案实现：

1. 对每个path，先提取路径的填充轮廓，再根据描边宽度、线帽、线连接属性，把描边部分向外偏移生成闭合的描边轮廓，将填充轮廓和描边轮廓合并，得到路径实际渲染范围对应的完整闭合多边形
2. 两两判定时同样先用包围盒做粗筛，通过粗筛的两个多边形再用分离轴定理或者马丁多边形相交算法做精确相交判定
3. 实时监听的逻辑和像素方案一致，每次路径形状、样式变化时重新生成对应的多边形缓存，再做相交校验即可

避坑提醒 #

• 不要直接用SVG原生的getIntersectionList方法做判定，这个方法只能检测元素的包围盒重叠，不会按照实际描边、填充范围做精确判定，兼容性也很差
• 不要用只计算路径中心线交点的库做这类视觉相交判定，这类库从原理上就无法识别描边宽度、填充带来的重叠，必然会出现漏判

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