SkiaSharp SKControl中如何精准检测点击命中的非矩形SKPath图层

问题背景 #

基于SkiaSharp Windows Forms版本的SKControl控件实现画布绘图功能，核心需求为支持用户点击画布选中特定图层，为每个图层单独设置不同颜色，实现效果如下：

图中三个图层分别通过三个独立的SKPath绘制，原有逻辑在大部分场景运行正常，但图层重叠时会出现选中错误：点击最浅色图层中位置低于最深色图层顶点的区域时，会错误选中深色图层。
问题根源为现有命中测试逻辑使用path.GetBounds()获取路径的SKRect外接矩形，鼠标点击时基于点击坐标生成对应SKRect，通过调用rect.IntersectsWith(mouseRect)判断命中图层，这种基于外接矩形相交的判断逻辑无法适配非矩形路径的重叠场景。

当前调试阶段使用的未优化命中测试代码如下：

SKRect hitRect = SKRect.Create(scaledPixelPosition, new SKSize(20f, 20f));
ElementLayerInfo elementLayerInfo = new ElementLayerInfo();

foreach(Element element in _elements)
{
    foreach (KeyValuePair<int, ElementLayerInfo>  kvp in element.ElementLayers)
    {
        if (kvp.Value.LayerRect.IntersectsWith(hitRect))
        {
            elementLayerInfo = kvp.Value;
        }
    }
}

实现方案 #

外接矩形判断仅适合作为第一层快速过滤逻辑，不能作为命中的最终判断依据，精准命中需要按以下逻辑实现：

• 保留外接矩形相交判断作为前置筛选，直接跳过完全不可能命中的图层，减少不必要的计算
• 对通过矩形筛选的图层，使用SKPath原生的Contains方法，判断点击坐标是否实际落在路径闭合区域内
• 调整遍历顺序：按照图层绘制顺序倒序遍历（最后绘制的最上层图层优先判断），第一个命中的图层即为用户实际点击的最顶层图层，找到结果后直接终止遍历，避免下层图层覆盖结果
• 注意坐标一致性：判断前需将鼠标的屏幕坐标转换为和SKPath一致的画布逻辑坐标，若画布存在平移、缩放操作，必须先做坐标映射，否则会出现坐标错位导致判断失效
• 若需要支持未闭合的线条类路径命中，Contains方法不适用，可在矩形过滤后计算点击点到路径的最短距离，距离小于点击容差+线宽/2时判定为命中

修正后代码参考 #

// 点击坐标需提前转换为与SKPath一致的画布逻辑坐标
SKPoint clickPoint = scaledPixelPosition;
// 配置点击容差，避免过细的元素难以选中
float hitTolerance = 10f;
SKRect hitJudgeRect = SKRect.Inflate(SKRect.Create(clickPoint, SKSize.Empty), hitTolerance, hitTolerance);

ElementLayerInfo hitLayer = null;

// 倒序遍历元素列表：优先判断后绘制的上层元素
for (int elemIdx = _elements.Count - 1; elemIdx >= 0; elemIdx--)
{
    Element currentElem = _elements[elemIdx];
    // 倒序遍历单个元素下的图层
    var layerPairs = currentElem.ElementLayers.ToList();
    for (int layerIdx = layerPairs.Count - 1; layerIdx >= 0; layerIdx--)
    {
        ElementLayerInfo currentLayer = layerPairs[layerIdx].Value;
        // 第一层快速过滤：外接矩形不相交直接跳过
        if (!currentLayer.LayerRect.IntersectsWith(hitJudgeRect))
            continue;
        
        // 第二层精准判断：点击点是否在路径范围内
        if (currentLayer.LayerPath.Contains(clickPoint.X, clickPoint.Y))
        {
            hitLayer = currentLayer;
            goto HitTestComplete;
        }
    }
}

HitTestComplete:
// 后续对hitLayer做选中处理即可，未命中时hitLayer为null

提示：如果你的ElementLayerInfo结构中没有存储对应图层的SKPath对象，需要补充存储该字段，仅靠外接矩形无法实现非矩形路径的精准判断。

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