使用 SwiftUI 注释覆盖路径视图下方显示的现有内容

Question

我有一个 SwiftUI 应用程序，其中向用户展示了一些内容，然后用户将使用 Path 视图对其进行注释。

我遇到的问题是，当我为绘图视图使用清晰的背景或根本没有背景时，其下方的内容会按需要显示，但绘图动作的手势更改不会注册。

但是，如果我为背景分配了不清晰的颜色，则手势会发生变化并显示绘图。

FWIW，我能够使用基于 UIKit 的界面达到预期的效果，现在只想用 SwiftUI 重新创建它。

下面的简化代码是演示我的困境的完整示例。这只是所用代码的近似值，因此不完全是生产质量。

通过将 backgroundColor 更改为 clear 或注释掉 .background(self.backgroundColor) 行，现在会出现 BackgroundView，但不会调用 onChanged , 所以不会出现墨水。

如果我运行原样，那么墨水会出现，但我看不到BackgroundView。

import SwiftUI

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                DrawingView(backgroundColor: .white,
                            geometry: geometry)
                    .zIndex(1)

                BackgroundView()
            }
        }
    }
}

struct DrawingView: View {
    let backgroundColor: Color
    let geometry: GeometryProxy
    
    @State private var points = [CGPoint]()
    
    var body: some View {
        Path { path in
            guard !points.isEmpty else  { return }
            
            for index in 0..<points.count - 1 {
                path.move(to: points[index])
                path.addLine(to: points[index + 1])
            }
        }
        .stroke(Color.red, lineWidth: 3.0)
        .background(self.backgroundColor)
        .gesture(DragGesture(minimumDistance: 0.1)
        .onChanged({ changeValue in
            print("onChanged called")
            self.points.append(changeValue.location)
        }))
    }
}

// Just a simple View to fill the background
struct BackgroundView: View {
    var body: some View {
        Color.black
            .edgesIgnoringSafeArea(.all)
    }
}

Answer 1

代替背景使用 .contentShape as

.stroke(Color.red, lineWidth: 3.0)
.contentShape(Rectangle())                    // << here !!
.gesture(DragGesture(minimumDistance: 0.1)
.onChanged({ changeValue in

使用 SwiftUI 注释覆盖路径视图下方显示的现有内容

Using SwiftUI to annotate an overlay with existing content shown beneath Path view

ios

ios13

swiftui

zstack