Ios 如何在SwiftUI中以一定Angular 绘制直线(&A)

如果你用.addArc来画曲线，那就没什么大不了的.如果使用中点作为圆弧的起点，然后使用.offset将最终形状移动到适当的位置，可能会更容易.这也为以后添加旋转效果铺平了道路.

要将鸟头的特征保持在一起，可以将它们全部作为覆盖应用到基圆，也可以在单独的ZStack个圆圈中构建它们.在单独的ZStack只中做这件事可能更简单，这ZStack的帧大小可以用来确定圆圈的大小以及眼睛和喙的大小.

以下是改编后的Shape强:

struct Beak: Shape {
    let angleDegrees: CGFloat
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.midY))
        path.addArc(
            center: CGPoint(x: rect.maxX, y: rect.midY),
            radius: rect.midX,
            startAngle: .degrees(180),
            endAngle: .degrees(180 + angleDegrees),
            clockwise: angleDegrees < 0
        )
        path.addLine(to: CGPoint(x: 0, y: rect.midY))
        path.closeSubpath()
        return path
    }
}

以下是你可以使用它的方法.我忍不住要把它制作成动画😄

struct BirdView: View {
    @State private var gapeAngle = Angle.zero

    private func birdHead(diameter: CGFloat) -> some View {
        ZStack {
            Circle()
                .fill(.yellow)

            Circle()
                .stroke(lineWidth: 5)

            // Eye
            Ellipse()
                .fill(.black)
                .frame(width: diameter / 5, height: diameter / 5.55)
                .offset(x: -diameter / 4.7, y: -diameter / 5.35)

            // Upper beak
            Beak(angleDegrees: 20)
                .stroke(style: .init(lineWidth: 5, lineJoin: .round))
                .foregroundStyle(.red)
                .offset(x: -diameter / 2)
                .rotationEffect(gapeAngle)

            // Lower beak
            Beak(angleDegrees: -20)
                .stroke(style: .init(lineWidth: 5, lineJoin: .round))
                .foregroundStyle(.red)
                .offset(x: -diameter / 2)
                .rotationEffect(-gapeAngle)
        }
        .frame(width: diameter, height: diameter)
    }

    var body: some View {
        birdHead(diameter: 150)
            .padding(.leading, 50)
            .frame(width: 300, height: 300)
            .background(.orange)
            .onAppear {
                withAnimation(.easeInOut.repeatForever(autoreverses: true)) {
                    gapeAngle = .degrees(5)
                }
            }
    }
}