SwiftUI - Shape(Circle, Rectangle,RoundedRectangle,Capsule,Path)

文章目录 Circle, RectangleRoundedRectangleCapsulePath

---

https://developer.apple.com/documentation/swiftui/circle

https://developer.apple.com/documentation/swiftui/rectangle

https://developer.apple.com/documentation/swiftui/roundedrectangle

https://developer.apple.com/documentation/swiftui/capsule

https://developer.apple.com/documentation/swiftui/ellipse

https://developer.apple.com/documentation/swiftui/path

---

Circle, Rectangle

---

 var body: some View
    {
        VStack
        {
            Circle()
            
            Circle()
                .fill(Color.pink)
                .frame(width: 200, height: 200)
            
            ZStack
            {
               Circle().fill(Color.purple)
               Circle().fill(Color.yellow).scaleEffect(0.8)
               Circle().fill(Color.pink).scaleEffect(0.6)
            }
            
            Rectangle()
                .padding()
            
            Rectangle()
                .fill(Color.pink)
                .frame(width: 200, height: 200)
        
            ZStack
            {
               Rectangle().fill(Color.purple)
                .frame(width: 300, height: 200)
                    
               Rectangle().fill(Color.blue)
                .frame(width: 300, height: 200)
                .scaleEffect(0.8)
                
               Rectangle()
                .fill(Color.yellow)
                .frame(width: 300, height: 200)
                .scaleEffect(0.6)
            }
        }
    }

---

RoundedRectangle

---

VStack {
            
            RoundedRectangle(cornerRadius: 120)
                .fill(Color.yellow)
            

            RoundedRectangle(cornerSize: CGSize(width: 80, height: 60))
                .frame(width: 160, height: 120)
           
            
            RoundedRectangle(cornerRadius: 60, style: RoundedCornerStyle.continuous)
                .fill(Color.pink)
        }

---

Capsule

---

struct ContentView : View
{
    @State private var hueShift: Bool = false

    var body: some View
    {
//        Capsule()
        
        ZStack
        {
            NewCapsule(color: .red, degree: 0)
            NewCapsule(color: .red, degree: 45)
            NewCapsule(color: .yellow, degree: 90)
            NewCapsule(color: .yellow, degree: 135)
            NewCapsule(color: .blue, degree: 180)
            NewCapsule(color: .blue, degree: 225)
            NewCapsule(color: .green, degree: 270)
            NewCapsule(color: .green, degree: 314)
        }
    }
}


#if DEBUG
struct ContentView_Previews : PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

struct NewCapsule: View {
    
    var color : Color
    var degree : Double
    
    var body: some View {
        Capsule()
            .foregroundColor(color)
            .frame(width : 60, height: 90)
            .offset(x: 0, y: 60)
            .rotationEffect(.degrees(degree))
            .opacity(0.75)
    }
}

---

Path

---

 Path { 
      path in
            path.addEllipse(in: CGRect(x: 100, y: 30, width: 200, height: 200))

            path.addRoundedRect(in: CGRect(x: 100, y: 120, width: 200, height: 200), cornerSize: CGSize(width: 10, height: 10))

            path.addEllipse(in: CGRect(x: 100, y: 210, width: 200, height: 200))
        }.fill(Color.yellow)

---