如何创建SwiftUI RoundedStar形状？

问题描述

这是一个自我解答的问题，在Stack Overflow上完全可以接受（甚至鼓励）。重点是分享对他人有用的东西。

SwiftUI具有一个RoundedRectangle Shape。最好有一个五角星，其圆角的尖端可以用于填充，剪辑和动画。

此Stack Overflow answer显示了如何使用RoundedStar将UIView作为自定义UIBezierPath。

如何将此代码作为SwiftUI改编为Shape并进行动画处理？

解决方法

这是RoundedStar代码，适合作为可动画的SwiftUI Shape：

// Five-point star with rounded tips
struct RoundedStar: Shape {
    var cornerRadius: CGFloat
    
    var animatableData: CGFloat {
        get { return cornerRadius }
        set { cornerRadius = newValue }
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let center = CGPoint(x: rect.width / 2,y: rect.height / 2)
        let r = rect.width / 2
        let rc = cornerRadius
        let rn = r * 0.95 - rc
        
        // start angle at -18 degrees so that it points up
        var cangle = -18.0
        
        for i in 1 ... 5 {
            // compute center point of tip arc
            let cc = CGPoint(x: center.x + rn * CGFloat(cos(Angle(degrees: cangle).radians)),y: center.y + rn * CGFloat(sin(Angle(degrees: cangle).radians)))

            // compute tangent point along tip arc
            let p = CGPoint(x: cc.x + rc * CGFloat(cos(Angle(degrees: cangle - 72).radians)),y: cc.y + rc * CGFloat(sin(Angle(degrees: (cangle - 72)).radians)))

            if i == 1 {
                path.move(to: p)
            } else {
                path.addLine(to: p)
            }

            // add 144 degree arc to draw the corner
            path.addArc(center: cc,radius: rc,startAngle: Angle(degrees: cangle - 72),endAngle: Angle(degrees: cangle + 72),clockwise: false)

            // Move 144 degrees to the next point in the star
            cangle += 144
        }

        return path
    }
}

该代码与UIBezierPath版本非常相似，不同之处在于它使用新的Angle类型，可以轻松访问degrees和radians。删除了绘制旋转星形的代码，因为使用.rotationEffect(angle:)视图修饰符可以很容易地将旋转添加到SwiftUI形状。

---

演示：

这是一个演示，展示了cornerRadius设置的可动画效果，并显示了全屏星体上各种cornerRadius设置的外观。

struct ContentView: View {
    @State private var radius: CGFloat = 0.0
    
    var body: some View {
        ZStack {
            Color.blue.edgesIgnoringSafeArea(.all)
            VStack(spacing: 40) {
                Spacer()
                RoundedStar(cornerRadius: radius)
                    .aspectRatio(1,contentMode: .fit)
                    .foregroundColor(.yellow)
                    .overlay(Text("     cornerRadius: \(Int(self.radius))     ").font(.body))
                HStack {
                    ForEach([0,10,20,40,80,200],id: \.self) { value in
                        Button(String(value)) {
                            withAnimation(.easeInOut(duration: 0.3)) {
                                self.radius = CGFloat(value)
                            }
                        }
                        .frame(width: 50,height: 50)
                        .foregroundColor(.black)
                        .background(Color.yellow.cornerRadius(8))
                    }
                }
                Spacer()
            }
        }
    }
}

---

在iPad上的Swift Playgrounds中运行

这可以在iPad的Swift Playgrounds应用程序中完美运行。只需添加：

import PlaygroundSupport

在顶部，

PlaygroundPage.current.setLiveView(ContentView())

最后。