如何在SwiftUI中创建具有圆角顶部和锯齿状底部边缘的自定义Shape，类似于撕破的纸

我将通过顶部拐角的半径、三角形的拐角半径和三角形的大小来参数化该形状.

给定的rect可能不适合这些三角形中的整个.目前尚不清楚在这种情况下形状应该是什么样子，因此我将三角形的宽度视为minimum宽度.实际的三角形可能比这更宽，以便在给定的rect个中容纳整个三角形.

这是代码.主要 idea 是使用addArc(tangent1End:tangent2End:radius:)，以便我们画的每条线都有圆角.另请参阅 comments 中的解释.

struct CustomShape: Shape {
    let topCornersRadius: CGFloat
    let trianglesCornerRadius: CGFloat
    let triangleHeight: CGFloat
    let minTriangleWidth: CGFloat
    
    func path(in rect: CGRect) -> Path {
        Path { path in
            // calculate the minimum width of the triangles,
            // such that it is at least minTriangleWidth, and
            // rect.width fits an integer number of such triangles
            let triangleCount = Int(rect.width / minTriangleWidth)
            let actualTriangleWidth = rect.width / CGFloat(triangleCount)
            
            // start from the top left
            path.move(to: .init(x: rect.minX + topCornersRadius, y: rect.minY))
            // draw the rounded corner for the top left corner
            path.addArc(
                tangent1End: rect.origin,
                tangent2End: .init(x: rect.minX, y: rect.minX + topCornersRadius),
                radius: topCornersRadius
            )
            
            // draw the left side of the shape
            var tangent1End = CGPoint(x: rect.minX, y: rect.maxY)
            var tangent2End = tangent1End.applying(.init(translationX: actualTriangleWidth / 2, y: -triangleHeight))
            path.addArc(tangent1End: tangent1End, tangent2End: tangent2End, radius: trianglesCornerRadius / 2)
            
            // draw most of the triangles
            // each iteration draws one side of a triangle
            // we don't draw the right side of the last triangle in the loop,
            // because it will have a different tangent2End
            for i in 0..<(2 * triangleCount - 1) {
                tangent1End = tangent2End
                tangent2End = tangent1End.applying(.init(
                    translationX: actualTriangleWidth / 2,
                    y: triangleHeight * (i.isMultiple(of: 2) ? 1 : -1)
                ))
                path.addArc(tangent1End: tangent1End, tangent2End: tangent2End, radius: trianglesCornerRadius)
            }
            
            // draw the right side of the last triangle
            path.addArc(tangent1End: tangent2End, tangent2End: .init(x: rect.maxX, y: rect.minY), radius: trianglesCornerRadius / 2)
            
            // draw the right side of the shape
            path.addArc(
                tangent1End: .init(x: rect.maxX, y: rect.minY),
                tangent2End: rect.origin,
                radius: topCornersRadius
            )
            
            // connects the top right corner of the shape to the top left corner
            path.closeSubpath()
        }
    }
}

示例输出: