Swift Academy · درس

الرسم المخصص باستخدام Core Graphics

ارسم المسارات والأشكال في draw(_:).

الدرس 4 من 413 خطوة

الرسم المخصص باستخدام Core Graphics درس مجاني في Swift Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Swift Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Swift Academy 4 دروس في المجموع.

متى ترسم محتوى مخصصًا

عندما تعجز الطبقات والصور عن تمثيل شكل ما، مثل المخططات والتوقيعات وعناصر التحكم المخصصة، يمكنك رسمه بنفسك باستخدام Core Graphics (Quartz 2D).

تجاوز draw(_:)

أنشئ فئة فرعية من UIView وتجاوز draw(_:). يستدعيه UIKit مع سياق مُهيأ، وتصدر أوامر الرسم داخله.

import UIKit
final class ChartView: UIView {
    override func draw(_ rect: CGRect) {
        // drawing commands go here
    }
}

سياق الرسومات

داخل draw(_:)، احصل على CGContext الحالي. فهو لوحة ذات حالة؛ إذ تضبط الألوان وسماكات الخطوط، ثم ترسم الحدود أو تعبّئ الأشكال.

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }
    ctx.setFillColor(UIColor.systemTeal.cgColor)
    ctx.fill(rect)
}

إنشاء المسارات

يصف CGPath (أو UIBezierPath) الخطوط والمنحنيات والأشكال. انتقل إلى نقطة بداية، ثم أضف الخطوط والمنحنيات.

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 50))
path.addLine(to: CGPoint(x: 0, y: 100))
path.close()

رسم الحدود والتعبئة

ترسم الحدود مخطط المسار، بينما تلوّن التعبئة الجزء الداخلي منه. اضبط اللون والسماكة، ثم استدعِ stroke() أو fill().

UIColor.systemRed.setStroke()
let line = UIBezierPath()
line.lineWidth = 3
line.move(to: CGPoint(x: 10, y: 10))
line.addLine(to: CGPoint(x: 90, y: 90))
line.stroke()

المنحنيات

أضف منحنيات ناعمة باستخدام مقاطع Bezier تربيعية (addQuadCurve) أو تكعيبية (addCurve)، مع تحديد نقاط التحكم.

let p = UIBezierPath()
p.move(to: CGPoint(x: 0, y: 100))
p.addCurve(to: CGPoint(x: 200, y: 100),
           controlPoint1: CGPoint(x: 50, y: 0),
           controlPoint2: CGPoint(x: 150, y: 200))

حالة السياق: الحفظ والاستعادة

للسياق حالة محفوظة. أحط التحويلات والقص باستدعاء saveGState()/restoreGState() حتى لا تتسرب التغييرات إلى عمليات الرسم اللاحقة.

ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()

التدرجات والظلال

يرسم Core Graphics التدرجات (CGGradient مع drawLinearGradient) والظلال (setShadow(offset:blur:color:)) مباشرة داخل السياق.

ctx.setShadow(offset: CGSize(width: 0, height: 2),
              blur: 4,
              color: UIColor.black.cgColor)

القص

أضف مسارًا واستدعِ clip() لحصر عمليات الرسم اللاحقة داخل تلك المنطقة، وهو مفيد للصور ذات الزوايا المستديرة أو التعبئات المقنّعة.

let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the oval

الأداء وsetNeedsDisplay

يعمل draw(_:) على وحدة المعالجة المركزية وتكلفته مرتفعة نسبيًا. لا تطلب إعادة الرسم إلا عند الحاجة عبر setNeedsDisplay()، وحافظ على خفة كود الرسم.

func updateData() {
    self.data = newData
    setNeedsDisplay() // schedule one redraw
}

التصيير خارج الشاشة

بالنسبة إلى الصور النقطية القابلة لإعادة الاستخدام، صَيّرها داخل صورة باستخدام UIGraphicsImageRenderer بدلًا من إعادة رسمها في كل إطار.

let renderer = UIGraphicsImageRenderer(size: CGSize(width: 100, height: 100))
let image = renderer.image { ctx in
    UIColor.systemBlue.setFill()
    ctx.fill(CGRect(x: 0, y: 0, width: 100, height: 100))
}

تحقق سريع: Core Graphics

اختبر مدى فهمك للرسم المخصص.

أجب عليها في الدرس التفاعلي

مراجعة: الرسم المخصص باستخدام Core Graphics

تجاوز draw(_:) وأصدر أوامر إلى CGContext: أنشئ المسارات باستخدام الخطوط ومنحنيات Bezier، ثم ارسم حدودها أو عبّئها. اعزل التحويلات والقص باستخدام saveGState()/restoreGState()، وأضف التدرجات والظلال وعمليات القص مباشرة.

الرسم مهمة تُنفَّذ على وحدة المعالجة المركزية، لذا أعد الرسم فقط عبر setNeedsDisplay() وخزّن الصور النقطية القابلة لإعادة الاستخدام مؤقتًا باستخدام UIGraphicsImageRenderer.

البدء مجانًا

تعلم Swift مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 122
الدروس: 409

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «الرسم المخصص باستخدام Core Graphics» مجاني؟

نعم — نص درس «الرسم المخصص باستخدام Core Graphics» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Swift Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Swift Academy 4 دروس في المجموع.

ماذا ستتعلم في «الرسم المخصص باستخدام Core Graphics»؟

ارسم المسارات والأشكال في draw(_:). تتمرن على Swift Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Swift Academy؟

لا تُشترط خبرة سابقة. Swift Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «الرسم المخصص باستخدام Core Graphics»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Swift Academy هذا؟

نعم. كل درس في Swift Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Swift Academy