BezierPath clipShape 问题

Question

我在左右两侧添加了曲线。看stroke函数的时候一切正常，但是去掉stroke函数后，右边的曲线正常，左边的曲线就不行了。这是一个错误吗？

ContentView

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, dampingFraction: 0.6, 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: 0))
            path.addLine(to: CGPoint(x: rect.width, y: rect.height))
            path.addLine(to: CGPoint(x: 0, 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, y: 180), control1: CGPoint(x: width - 50, y: 130), control2: CGPoint(x: width - 50, y: 130))
        }
    }
}

Answer 1

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

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, y: 130), 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))
        }
    }
}

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

没有中风

有中风

BezierPath clipShape 问题

BezierPath clipShape issue

xcode

path

ios

uibezierpath

swiftui