自定义形状记录在绘制路径之外的点击

Posted

技术标签:

【中文标题】自定义形状记录在绘制路径之外的点击【英文标题】:Custom shape registers taps outside drawn path 【发布时间】:2021-07-23 01:12:52 【问题描述】:

我在 SwiftUI 中创建了一个自定义的 Arc 形状,但是当我向它添加一个 onTapGesture 修饰符时,它会在我为 Arc 绘制的区域之外注册点击(它在任何地方注册点击rect 内用于绘制Arc)。我怎样才能确保水龙头只在Arc 的绘制路径内注册,而不是整个rect

这是我画的Arc 形状:

struct Arc: Shape 
  let angle: Angle
  let thickness: CGFloat
  let clockwise: Bool
  
  func path(in rect: CGRect) -> Path 
    var path = Path()
    
    let innerArcEndPoint = CGPoint(x: rect.maxX - thickness, y: 0)
    let innerArcStartPoint = CGPoint(
      x: innerArcEndPoint.x * cos(CGFloat(angle.radians)),
      y: innerArcEndPoint.x * sin(CGFloat(angle.radians)))
    
    path.move(to: innerArcStartPoint)
    path.addArc(center: rect.origin, radius: innerArcEndPoint.x, startAngle: angle, endAngle: Angle.zero, clockwise: !clockwise)
    path.addLine(to: CGPoint(x: rect.maxX, y: 0))
    path.addArc(center: rect.origin, radius: rect.maxX, startAngle: Angle.zero, endAngle: angle, clockwise: clockwise)
    path.closeSubpath()
    
    return path
  

这是我使用带有onTapGesture 修饰符的Arc

struct TestTappingArc: View 
    var body: some View 
        Arc(angle: Angle(degrees: 45), thickness: 20, clockwise: false)
          .foregroundColor(.blue) // The only area I want to be tappable
          .background(Color.orange) // The area I DON'T want to be tappable (but currently is tappable)
          .frame(width: 100, height: 100)
          .onTapGesture 
            print("hello")
          
    

这是它在屏幕上的样子:

【问题讨论】:

【参考方案1】:

你需要使用相同形状的contentShape来限制命中测试区域(因为视图总是矩形),比如

Arc(angle: Angle(degrees: 45), thickness: 20, clockwise: false)
  .foregroundColor(.blue)
  .contentShape(Arc(angle: Angle(degrees: 45), thickness: 20, clockwise: false))
  .onTapGesture       // << here !!
    print("hello")
  
  .background(Color.orange)
  .frame(width: 100, height: 100)

【讨论】:

【参考方案2】:

感谢 Asperi 的回答——这确实解决了问题。但是,我意识到一个更简单的解决方案是将背景移动到 onTapGesture 修饰符之后,如下所示:

Arc(angle: Angle(degrees: 45), thickness: 20, clockwise: false)
  .foregroundColor(.blue)
  .frame(width: 100, height: 100)
  .onTapGesture 
    print("hello")
  
  .background(Color.orange)

【讨论】:

以上是关于自定义形状记录在绘制路径之外的点击的主要内容,如果未能解决你的问题,请参考以下文章

SpriteKit:如何在没有 SKShapeNode 的情况下绘制自定义形状?

在自定义视图中绘制描边形状

如何在颤动中绘制自定义动态高度曲线形状?

如何在 UIScrollView 中绘制自定义形状

自定义边界矩形的形状

如何使用 WPF 中的 TextShape 类绘制自定义形状?