如何在SwiftUI中绘制符合需求的自定义曲线？

需求说明 #

需要绘制如下形状的曲线（忽略红色遮挡部分）：

当前实现代码 #

import SwiftUI

struct CurveShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: .zero)
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        path.addCurve(to: CGPoint(x: rect.minX, y: rect.maxY),
                      control1: CGPoint(x: rect.maxX * 0.70, y: rect.midY),
                      control2: CGPoint(x: rect.maxX * 0.25, y: rect.maxY * 1.25))
        path.closeSubpath()
        return path
    }
}

struct CurveShape_Previews: PreviewProvider {
    static var previews: some View {
        CurveShape()
            .stroke(Color.red, lineWidth: 5)
            .frame(height: 200)
            .padding()
    }
}

当前效果 #

修改方案 #

当前代码的问题在于曲线终点设置错误，导致额外生成了左侧的垂直直线，且控制点位置不符合需求的弯曲弧度。调整后的代码如下：

import SwiftUI

struct CurveShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // 起点：左上角
        path.move(to: CGPoint(x: rect.minX, y: rect.minY))
        // 绘制顶部水平直线到右上角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        // 绘制右侧垂直直线到右下角
        path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
        // 绘制曲线连接右下角到左上角，调整控制点匹配需求弧度
        path.addCurve(to: CGPoint(x: rect.minX, y: rect.minY),
                      control1: CGPoint(x: rect.maxX * 0.7, y: rect.maxY * 0.6),
                      control2: CGPoint(x: rect.maxX * 0.3, y: rect.minY * 0.6))
        return path
    }
}

struct CurveShape_Previews: PreviewProvider {
    static var previews: some View {
        CurveShape()
            .stroke(Color.red, lineWidth: 5)
            .frame(height: 200)
            .padding()
    }
}

关键调整点： #

• 修正曲线终点：将曲线终点从(rect.minX, rect.maxY)改为(rect.minX, rect.minY)，让曲线直接连接回起点，避免生成多余的左侧垂直直线。
• 调整控制点位置：通过修改control1和control2的坐标比例，让曲线的弯曲弧度匹配需求。你可以根据实际效果微调0.7、0.6这类比例数值，直到曲线形状完全符合预期。

内容的提问来源于stack exchange，提问作者Zin Win Htet