SwiftUI中修复Path控件.onHover修饰符失效及hover区域错误的方案咨询

我明白你遇到的困扰了——给Path加.onHover时，触发范围和你设置的stroke宽度完全不匹配，只有在路径的极细线条上才能触发，而Rectangle因为本身有明确的填充区域，hover检测就正常。这其实是SwiftUI的hit testing（点击/悬停检测）机制导致的：默认情况下，Path的检测区域是它的填充区域，而非你用stroke绘制的线条宽度。

解决方案：模拟Stroke的检测区域 #

这里有两种可靠的实现方式，都能让hover触发范围和你看到的线条完全匹配：

方案1：用ZStack叠加透明检测视图

直接在Path下方放一个透明的Rectangle，让它的frame刚好匹配你设置的stroke宽度和路径长度，然后把.onHover加在这个矩形上。这种方法简单直观，不需要自定义组件：

struct CenterCategoryPlanView : View {
    @State private var isMouseHover = false
    @Binding var startPoint: CGPoint
    @Binding var endPoint: CGPoint
    @Binding var categoryEntity : CategoryEntity
    @Binding var monthColumnSize : CGSize
    
    let strokeWidth: CGFloat = 30 // 把线条宽度抽成常量，方便统一修改
    
    var body: some View {
        ZStack {
            // 透明的hover检测区域，完全匹配stroke的范围
            Rectangle()
                .frame(
                    width: abs(endPoint.x - startPoint.x),
                    height: strokeWidth
                )
                .position(
                    x: (startPoint.x + endPoint.x) / 2,
                    y: startPoint.y
                )
                .foregroundColor(.clear)
                .onHover(perform: { value in
                    print("isHovered: \(value)")
                    isMouseHover = value // 如果需要维护hover状态的话
                })
            
            // 原来的Path，保留视觉效果
            Path { path in
                path.move(to: startPoint )
                path.addLine(to: endPoint)
                path.closeSubpath()
            }
            .stroke(style: StrokeStyle(lineWidth: strokeWidth, lineCap: .square))
            .foregroundColor(Color(hex: categoryEntity.color ?? ""))
        }
        
        Text(categoryEntity.name ?? "-")
            .position(x: max(monthColumnSize.width, (endPoint.x + startPoint.x) / 2), y: startPoint.y)
            .aspectRatio(1, contentMode: .fill)
            .font(.title2)
    }
}

方案2：用.contentShape指定自定义检测区域

如果你不想额外添加视图，可以给Path设置.contentShape，用自定义的Shape来定义hit testing的范围：

首先定义一个匹配stroke范围的Shape：

struct StrokeHitShape: Shape {
    var startPoint: CGPoint
    var endPoint: CGPoint
    var strokeWidth: CGFloat
    
    func path(in rect: CGRect) -> Path {
        let halfWidth = strokeWidth / 2
        let minX = min(startPoint.x, endPoint.x)
        let maxX = max(startPoint.x, endPoint.x)
        let minY = startPoint.y - halfWidth
        let maxY = startPoint.y + halfWidth
        
        // 返回覆盖stroke区域的矩形路径
        return Path(CGRect(x: minX, y: minY, width: maxX - minX, height: maxY - minY))
    }
}

然后修改CenterCategoryPlanView的Path部分：

Path { path in
    path.move(to: startPoint )
    path.addLine(to: endPoint)
    path.closeSubpath()
}
.stroke(style: StrokeStyle(lineWidth: 30, lineCap: .square))
.foregroundColor(Color(hex: categoryEntity.color ?? ""))
.contentShape(StrokeHitShape(
    startPoint: startPoint,
    endPoint: endPoint,
    strokeWidth: 30
))
.onHover(perform: { value in
    print("isHovered: \(value)")
})

这样Path的hover检测就会使用你自定义的Shape范围，和stroke视觉效果完全一致。

为什么Rectangle能正常工作？ #

因为Rectangle本身是带有填充区域的Shape，它的hit testing范围默认就是它的frame，所以.onHover能正确响应整个矩形区域的悬停。而Path默认只有当鼠标在它的填充路径内（对于一条线来说，填充区域几乎为0）才会触发，因此需要我们手动指定检测范围。

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