# Circle

---

# Circle() في SwiftUI ⭕

---

## الأساسي:

```swift
Circle()
```

---

## كل الـ Modifiers:

### 🎨 اللون:

```swift
Circle()
    .fill(.blue)           // لون جوا
    .stroke(.red)          // حدود بس
    .stroke(.red, lineWidth: 5) // حدود بسماكة
```

```swift
  Circle()
  .foregroundStyle(.blue)
```

```swift
              Circle()
                .stroke(.red, style: StrokeStyle(lineWidth: 20, lineCap: .butt, dash: [5]))
                .frame(width: 200, height: 200)
```

```swift
                Circle()
                .stroke(.red, style: StrokeStyle(lineWidth: 10, lineCap: .round, dash: [20]))
                .frame(width: 200, height: 200)
```

```swift
                   Circle()
                .stroke(.red, style: StrokeStyle(lineWidth: 10, lineCap: .square, dash: [20]))
                .frame(width: 200, height: 200)
```

---

```swift
   Circle()
            
                .stroke(.red, style: StrokeStyle(lineWidth: 20, lineCap: .butt, dash: [10]))
                .fill(.red)

                .frame(width: 200, height: 200)
            
                .background {
                    Text("loading...")
                        .font(.headline)
                        .foregroundColor(.black)
                }
                .overlay {
                    Text("loading...")
                        .font(.footnote)
                        .foregroundColor(.green)
                        .bold()
                
            }
              
```

# شرح `.overlay` و `.fill` 🎯

---

## `.fill(.red)`
بيملي **جوه** الشكل بلون

```swift
Circle()
    .fill(.red) // الدايرة كلها حمرا من جوا
```

---

## `.overlay`
بيحط عنصر **فوق** الشكل

```swift
Circle()
    .fill(.red)
    .overlay {
        Text("loading...") // فوق الدايرة
    }
```

---

## الفرق بين `.overlay` و `.background`:

```
        Text "loading..." (overlay) ← فوق
        ╭───────────╮
       /  🔴 Circle  \
        ╰───────────╯
        Text "loading..." (background) ← تحت
```

---

## لو عملت `.hidden()`:

### على الـ overlay:

```swift
Circle()
    .fill(.red)
    .overlay {
        Text("loading...")
            .hidden() // ✅ النص اختفى بس المساحة لسه موجودة
    }
```

### على الـ Circle كله:

```swift
Circle()
    .fill(.red)
    .hidden()
// ❌ كل حاجة اختفت (Circle + overlay + background)
// بس المساحة لسه موجودة!
```

---

## ⚠️ مشكلة في الكود بتاعك:

```swift
Circle()
    .stroke(...)  // حدود
    .fill(.red)   // ❌ لازم fill قبل stroke
```

### الترتيب الصح:

```swift
Circle()
    .fill(.red)   // ✅ الأول
    .stroke(...)  // ✅ التاني
```

# سؤال ممتاز! 🎯
ليه لازم يكون ال fill
قبل ال strok
مع انها اشتغلت عادي
---

## الحقيقة:
في SwiftUI الجديد **(iOS 17+)** اشتغلت عادي ✅

---

## السبب:
Apple غيرت الـ behavior في الإصدارات الجديدة

```swift
// الاتنين شغالين في iOS 17+
Circle()
    .stroke(.red, lineWidth: 5)
    .fill(.blue)

Circle()
    .fill(.blue)
    .stroke(.red, lineWidth: 5)
```

---

## بس في iOS القديم:
```swift
// ❌ كان بيمسح الـ stroke
Circle()
    .stroke(.red, lineWidth: 5)
    .fill(.blue) // كان بيغطي الـ stroke
```

---

## الخلاصة:

| الإصدار | الترتيب مهم؟ |
|---------|-------------|
| iOS 17+ | ❌ مش مهم |
| iOS القديم | ✅ مهم |

---

> أنا غلطت لما قلت لازم، في إصدارك **مش مهم الترتيب** بينهم 😄🎯

---

> `.hidden()` بتخفي العنصر بس **بتفضل المساحة موجودة** 🎯

### 📏 الحجم:

```swift
Circle()
    .frame(width: 100, height: 100)
```

---

### 🖼️ الحدود:

```swift
Circle()
    .strokeBorder(.blue, lineWidth: 10) // حدود من جوا
    .stroke(.blue, lineWidth: 10)       // حدود من برا
```

---

### 🌫️ الظل:

```swift
Circle()
    .shadow(radius: 10)
    .shadow(color: .blue, radius: 10, x: 5, y: 5)
```

---

### 🎭 الشفافية:

```swift
Circle()
    .opacity(0.5) // 50% شفاف
```

---

### 🔄 التدرج اللوني:

```swift
Circle()
    .fill(LinearGradient(
        colors: [.blue, .red],
        startPoint: .top,
        endPoint: .bottom
    ))
```

---

## مثال كامل:

```swift
Circle()
    .fill(.blue)
    .frame(width: 100, height: 100)
    .shadow(color: .blue, radius: 10)
    .opacity(0.8)
    .overlay {
        Text("Hi")
            .foregroundStyle(.white)
            .bold()
    }
```

---

## النتيجة:

```
      ╭─────╮
     /   Hi  \
    │    🔵   │
     \       /
      ╰─────╯
   (ظل ازرق تحته)
```

---

### `.overlay` vs `.background`:

```swift
Circle()
    .fill(.blue)
    .overlay {
        Text("فوق الدايرة") // ✅
    }
    .background {
        Color.red // تحت الدايرة ✅
    }
```

---

> ببساطة: Circle بتاخد نفس Modifiers أي Shape تاني 🎯

# `.trim` في SwiftUI ✂️

---

## إيه هو?
بيقطع جزء من الـ Shape ويعرض **جزء منها بس**.

---

## الأساسي:
```swift
Circle()
    .trim(from: 0, to: 1) // الدايرة كاملة
```

---

## القيم:
```swift
// من 0 لـ 1 = الشكل كامل
.trim(from: 0, to: 1)

// من 0 لـ 0.5 = نص الشكل بس
.trim(from: 0, to: 0.5)

// من 0.25 لـ 0.75 = ربع لـ ثلاثة أرباع
.trim(from: 0.25, to: 0.75)
```

---

## توضيح على Circle:

```
.trim(from: 0, to: 1)
    ╭───╮
   /     \
  │       │   // كاملة
   \     /
    ╰───╯

.trim(from: 0, to: 0.5)
    ╭───╮
   /     \    // نص بس
  

.trim(from: 0, to: 0.25)
    ╭──         // ربع بس
```

---

## ⚠️ مهم جداً:
لازم تستخدمه مع `.stroke` مش `.fill`

```swift
// ✅ الصح
Circle()
    .trim(from: 0, to: 0.7)
    .stroke(.blue, lineWidth: 10)

// ❌ مش هيظهر صح
Circle()
    .trim(from: 0, to: 0.7)
    .fill(.blue)
```

---

## حالات الاستخدام:

### 1️⃣ Progress Circle:
```swift
Circle()
    .trim(from: 0, to: 0.7) // 70%
    .stroke(.blue, lineWidth: 15)
    .frame(width: 100, height: 100)
    .rotationEffect(.degrees(-90)) // يبدأ من فوق
```

### 2️⃣ نص دايرة:
```swift
Circle()
    .trim(from: 0, to: 0.5) // نص دايرة بس
    .stroke(.red, lineWidth: 5)
    .frame(width: 200, height: 200)
```

### 3️⃣ على Rectangle:
```swift
Rectangle()
    .trim(from: 0, to: 0.5)
    .stroke(.green, lineWidth: 5)
    .frame(width: 200, height: 100)
```

### 4️⃣ على Capsule:
```swift
Capsule()
    .trim(from: 0, to: 0.7)
    .stroke(.orange, lineWidth: 8)
    .frame(width: 200, height: 60)
```

---

## مع Animation:
```swift
@State var progress: CGFloat = 0

Circle()
    .trim(from: 0, to: progress)
    .stroke(.blue, lineWidth: 10)
    .frame(width: 100, height: 100)
    .rotationEffect(.degrees(-90))
    .onAppear {
        withAnimation(.easeInOut(duration: 1)) {
            progress = 0.8 // يتحرك لـ 80%
        }
    }
```

---

## القيم من 0 لـ 1:

```
0                    1
|____________________|
start               end

0.25        =    ربع    25%
0.5         =    نص     50%
0.75        =    ثلاثة أرباع 75%
1           =    كامل   100%
```

---

> `.trim` أقوى مع **Animation** عشان تعمل Loading أو Progress indicators 🎯