如何获取自定义形状的 .onHover(...) 事件

Posted 2023-02-24

【中文标题】如何获取自定义形状的 .onHover(...) 事件

【英文标题】：How to get .onHover(...) events for custom Shapes

【发布时间】：2019-12-18 15:59:44

【问题描述】：

假设你有一个Circle。将鼠标悬停在圆圈内时如何更改其颜色？

我试过了

struct ContentView: View 
    @State var hovered = false

    var body: some View 
        Circle()
            .foregroundColor(hovered ? .purple : .blue)
            .onHover  self.hovered = $0 
    

但这会导致hovered 变为true，即使鼠标在圆圈之外（但仍在其边界框内）。

我注意到.onTapGesture(...) 使用实际形状的命中测试，而不是其边界框的命中测试。

那么，除了悬停之外，我们如何才能获得与点击手势类似的命中测试行为？

【问题讨论】：

onTapGesture 是否对形状使用命中测试？当我有一个旋转的矩形时，它似乎对我不起作用 - 它似乎仍在使用框架矩形。

【参考方案1】：

答案取决于您需要的精度。 SwiftUI 中的 hove 目前只监视 MouseEnter 和 MouseExit 事件，因此视图的工作区域是 Rectangle 的框架。

您可以在 ZStack 中构建一个 backgroundView，它可以使用自定义算法组合那些 Rectangle。在圆形中，它应该像一个带有不同一些小矩形的矩阵。一个过于简单的示例可能如下所示。

  ZStack
                            VStack
                            HStack
                                Rectangle().frame( width:100, height: 100).offset(x: -50, y: 0)
                                Rectangle().frame( width:100, height: 100).offset(x: 50, y: 0)
                                .onHoverprint($0)
                            Rectangle().foregroundColor(hovered ? .purple : .blue).clipShape(Circle())
                        

【讨论】：

我希望与 Shapes 上的 .onTapGesture 具有相同的精度。

然后就变成几何题了，用最少的矩形填充一个圆

问题是针对自定义形状。为了便于复制，我举了一个Circle 的例子，但我真的需要它来处理任何Shape

那么这是一个自适应积分问题。

一种简单的方法是用具有 1px 的 lineView 填充该区域。高度