swift - 如何创建 SwiftUI 圆形星形？

Question

This is a self-answered question which is perfectly acceptable (and even encouraged) on Stack Overflow. The point is to share something useful to others.

SwiftUI 有一个RoundedRectangle Shape。如果有一个带有圆形尖端的五角星可用于填充、剪裁和动画，那就太好了。

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

如何将此代码作为可以动画的 Shape 适应 SwiftUI？

Answer 1

这是 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 形状添加旋转。 View 修饰符。

---

演示:

这是一个演示，展示了 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())

最后。

---

使用 RoundedStar 形状创建欧盟旗帜

struct ContentView: View {
    static let flagSize: CGFloat = 234 // Change this to resize flag
    
    let flagHeight: CGFloat = flagSize
    let flagWidth: CGFloat = flagSize * 1.5
    let radius: CGFloat = flagSize / 3
    let starWidth: CGFloat = flagSize / 9
    let pantoneReflexBlue = UIColor(red: 0, green: 0x33/0xff, blue: 0x99/0xff, alpha: 1)
    let pantoneYellow = UIColor(red: 1, green: 0xcc/0xff, blue: 0, alpha: 1)
    
    var body: some View {
        ZStack {
            Color(pantoneReflexBlue).frame(width: flagWidth, height: flagHeight, alignment: .center)
            ForEach(0..<12) { n in
                RoundedStar(cornerRadius: 0)
                    .frame(width: starWidth, height: starWidth)
                    .offset(x: radius * cos(CGFloat(n) / CGFloat(12) * 2 * .pi), y: radius * sin(CGFloat(n) / CGFloat(12) * 2 * .pi))
                    .foregroundColor(Color(pantoneYellow))
            }
        }
    }
}