自定义形状注册绘制路径外的水龙头
Custom shape registers taps outside drawn path
我在 SwiftUI 中创建了一个自定义 Arc
形状,但是当我向它添加一个 onTapGesture
修饰符时,它会在我为 Arc
绘制的区域之外注册水龙头(它会注册在用于绘制 Arc
的 rect
中点击 任意位置 。如何确保水龙头仅在 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
}
}
这是我使用 Arc
和 onTapGesture
修饰符:
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")
}
}
}
这是它在屏幕上的样子:
你需要使用相同形状的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)
感谢 Asperi 的回答——这确实解决了问题。但是,我意识到一个更简单的解决方案就是将背景移动到 之后 onTapGesture
修饰符,如下所示:
Arc(angle: Angle(degrees: 45), thickness: 20, clockwise: false)
.foregroundColor(.blue)
.frame(width: 100, height: 100)
.onTapGesture {
print("hello")
}
.background(Color.orange)
我在 SwiftUI 中创建了一个自定义 Arc
形状,但是当我向它添加一个 onTapGesture
修饰符时,它会在我为 Arc
绘制的区域之外注册水龙头(它会注册在用于绘制 Arc
的 rect
中点击 任意位置 。如何确保水龙头仅在 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
}
}
这是我使用 Arc
和 onTapGesture
修饰符:
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")
}
}
}
这是它在屏幕上的样子:
你需要使用相同形状的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)
感谢 Asperi 的回答——这确实解决了问题。但是,我意识到一个更简单的解决方案就是将背景移动到 之后 onTapGesture
修饰符,如下所示:
Arc(angle: Angle(degrees: 45), thickness: 20, clockwise: false)
.foregroundColor(.blue)
.frame(width: 100, height: 100)
.onTapGesture {
print("hello")
}
.background(Color.orange)