SwiftUI画图之变化的花

最新推荐文章于 2026-01-07 09:24:08 发布

原创最新推荐文章于 2026-01-07 09:24:08 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #swift #xcode

本文介绍了如何在SwiftUI中创建一个可交互的图形——变化的花。通过定义一个shape类视图来绘制花瓣，并利用Slider组件动态调整花瓣的偏移量(petalOffset)和宽度(petalWidth)，实现图形的变化效果。

SwiftUI画图之变化的花
首先定义一个shape类视图，画出花瓣
简单的解释见程序

struct Flower: Shape {
    // 花瓣偏离中心点数值
    var petalOffset: Double = -20

    // 花瓣的宽度
    var petalWidth: Double = 100

    func path(in rect: CGRect) -> Path {
        // The path that will hold all petals
        var path = Path()

        // 从0度到360度每180/8度移动一次
        for number in stride(from: 0, to: CGFloat.pi * 2, by: CGFloat.pi / 8) {
            // 旋转花瓣
            let rotation = CGAffineTransform(rotationAngle: number)

            
            let position = rotation.concatenating(CGAffineTransform(translationX: rect.width / 2, y: rect.height / 2))

            // 创建路径
            let originalPetal = Path(ellipseIn: CGRect(x: CGFloat(petalOffset), y: 0, width: CGFloat(petalWidth), height: rect.width / 2))

            
            let rotatedPetal = originalPetal.applying(position)

            // 添加路径到旋转花瓣中
            path.addPath(rotatedPetal)
        }

        // 返回路径
        return path
    }
}

然后在主视图中调用

@State private var petalOffset = -20.0
    @State private var petalWidth = 100.0
    
    var body: some View {
        VStack{
        Flower(petalOffset: petalOffset, petalWidth: petalWidth)
            //.stroke(Color.red, lineWidth: 1)
            .fill(Color.red, style: FillStyle(eoFill: true))

        Text("Offset")
        Slider(value: $petalOffset, in: -40...40).padding([.horizontal, .bottom])

        Text("Width")
        Slider(value: $petalWidth, in: 0...100).padding(.horizontal)
    }
    }