BezierPath clipShape 问题

如何解决BezierPath clipShape 问题

我在右侧和左侧添加了曲线。再看描边功能，一切正常，但是去掉描边功能后，右边的曲线正常工作，而左边的曲线不工作。这是一个错误吗？

内容视图

struct ContentView: View {
    @State var viewState: CGSize = .zero
    var body: some View {
        ZStack {
            Color.orange
                .clipShape(FooBezierPath(rightOffset: viewState).stroke())//remove stroke
                .edgesIgnoringSafeArea(.all)
                .overlay(
                    HStack {
                        Image(systemName: "chevron.right")
                            .font(.largeTitle)
                            .offset(y: 115)
                            .edgesIgnoringSafeArea(.all)
                        Spacer()
                        Image(systemName: "chevron.left")
                            .font(.largeTitle)

                            .contentShape(Rectangle())
                            .gesture(DragGesture().onChanged({ (value) in

                                withAnimation(.spring(response: 0.5,dampingFraction: 0.6,blendDuration: 0)) {
                                    self.viewState = value.translation
                                }
                            }).onEnded({ (value) in
                                withAnimation(.spring(response: 0.5,blendDuration: 0)) {
                                    self.viewState = .zero
                                }
                            }))
                            .edgesIgnoringSafeArea(.all)
                            .offset(y: 70)
                    },alignment: .topTrailing
                )
                .padding(.horizontal)
           
        }
    }
}

贝塞尔路径

struct FooBezierPath: Shape {
    var rightOffset: CGSize
    func path(in rect: CGRect) -> Path {
        return Path { path in
            let width = rect.width + rightOffset.width
            let height = rect.height
            
            path.move(to: CGPoint(x: 0,y: 0))
            path.addLine(to: CGPoint(x: rect.width,y: rect.height))
            path.addLine(to: CGPoint(x: 0,y: 0))
            
            
            //MARK: - Left Curve
            path.move(to: CGPoint(x: 0,y: 80))
            path.addCurve(to: CGPoint(x: 0,y: 180),control1: CGPoint(x: 50,y: 130),control2: CGPoint(x: 50,y: 130))
            
            //MARK: - Right Curve
            path.move(to: CGPoint(x: width,y: 80))
            path.addCurve(to: CGPoint(x: width,control1: CGPoint(x: width - 50,control2: CGPoint(x: width - 50,y: 130))
        }
    }
}

解决方法

它有助于在不移动点的情况下绘制整个形状，否则剪辑会因某种原因出现故障。试试这个：

struct FooBezierPath: Shape {
    var rightOffset: CGSize
    func path(in rect: CGRect) -> Path {
        return Path { path in
            let width = rect.width + rightOffset.width
            let height = rect.height
            
            // Draw left Edge of Shape
            path.move(to: CGPoint(x: 0,y: 0))
            path.addLine(to: CGPoint(x: 0,y: 80))
            path.addCurve(to: CGPoint(x: 0,y: 180),control1: CGPoint(x: 50,y: 130),control2: CGPoint(x: 50,y: 130))
            path.addLine(to: CGPoint(x: 0,y: height))
            
            // Draw Bottom Edge of Shape
            path.addLine(to: CGPoint(x: width,y: height))
            
            // Draw Right Edge of Shape
            path.addLine(to: CGPoint(x: width,y: 180))
            path.addCurve(to: CGPoint(x: width,y: 80),control1: CGPoint(x: width - 50,control2: CGPoint(x: width - 50,y: 130))
            path.addLine(to: CGPoint(x: width,y: 0))
            
            // Draw Top Edge of Shape
            path.addLine(to: CGPoint(x:0,y: 0))
        }
    }
}

尝试并测试了代码，结果是：

无中风

有中风