如何在 SwiftUI 中创建具有圆角顶角和类似于撕纸的锯齿状底边的自定义形状？

Question

我正在使用 SwiftUI，需要实现一个模仿特定设计的自定义形状。形状是一个矩形，但有明显的特征：顶角是圆形的，底边类似于一排圆角三角形，使其看起来像撕碎的纸。

有人可以指导我如何创建这个特定的形状，或者建议一种更好的方法来在 SwiftUI 中实现矩形底部边缘的撕纸效果吗？

这是我迄今为止尝试过的：

struct CustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        let width = rect.size.width
        let height = rect.size.height

        let bottomLeft = CGPoint(x: 0, y: height)
        let bottomRight = CGPoint(x: width, y: height)
        let topLeft = CGPoint(x: 0, y: 0)
        let topRight = CGPoint(x: width, y: 0)

        path.move(to: bottomRight)

        path.addLine(to: CGPoint(x: bottomRight.x, y: topRight.y))

        path.addLine(to: CGPoint(x: topLeft.x, y: topLeft.y))
        
        path.addLine(to: CGPoint(x: bottomLeft.x, y: bottomLeft.y))
        
        let triangleWidth: CGFloat = 11
        let triangleHeight: CGFloat = 6

        var x: CGFloat = 0
        while x <= rect.width {
            let startX = x
            let endX = x + triangleWidth
            let midX = (startX + endX) / 2

            path.move(to: CGPoint(x: startX, y: rect.maxY))
            path.addLine(to: CGPoint(x: midX, y: rect.maxY - triangleHeight))
            path.addLine(to: CGPoint(x: endX, y: rect.maxY))

            x += triangleWidth
        }

        return path
    }
}

Answer 1

您对使用正弦曲线波形有何看法？您可以看到 Paul Hudson 如何“创建 WaveView 来绘制平滑波形”。 /马丁