0Pricing
Swift Academy · Lektion

Benutzerdefiniertes Zeichnen mit Core Graphics

Zeichnen Sie Pfade und Formen in draw(_:).

Benutzerdefiniertes Zeichnen mit Core Graphics ist eine kostenlose Swift Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Swift Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Wann eigene Inhalte gezeichnet werden

Wenn sich eine Form – etwa ein Diagramm, eine Unterschrift oder ein benutzerdefiniertes Steuerelement – nicht mit Layern und Bildern darstellen lässt, zeichnen Sie sie mit Core Graphics (Quartz 2D) selbst.

draw(_:) überschreiben

Leiten Sie eine Klasse von UIView ab und überschreiben Sie draw(_:). UIKit ruft die Methode mit einem konfigurierten Kontext auf; dort führen Sie die Zeichenbefehle aus.

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

Der Grafikkontext

Rufen Sie innerhalb von draw(_:) den aktuellen CGContext ab. Er ist eine zustandsbehaftete Zeichenfläche: Sie legen Farben und Linienstärken fest und zeichnen anschließend Konturen oder Füllungen.

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

Pfade erstellen

Ein CGPath (oder UIBezierPath) beschreibt Linien, Kurven und Formen. Legen Sie einen Startpunkt fest und fügen Sie anschließend Linien und Kurven hinzu.

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()

Konturen zeichnen und Flächen füllen

Konturen zeichnen den Umriss eines Pfads, Füllungen färben seinen Innenbereich. Legen Sie Farbe und Breite fest und rufen Sie anschließend stroke() oder fill() auf.

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()

Kurven

Fügen Sie mit quadratischen (addQuadCurve) oder kubischen (addCurve) Bézier-Segmenten glatte Kurven hinzu, indem Sie Kontrollpunkte angeben.

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))

Kontextzustand: sichern und wiederherstellen

Der Kontext ist zustandsbehaftet. Schließen Sie Transformationen und Clipping in saveGState()/restoreGState() ein, damit Änderungen nicht in spätere Zeichenoperationen hineinwirken.

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

Farbverläufe und Schatten

Core Graphics zeichnet Farbverläufe (CGGradient mit drawLinearGradient) und Schatten (setShadow(offset:blur:color:)) direkt in den Kontext.

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

Clipping

Fügen Sie einen Pfad hinzu und rufen Sie clip() auf, um nachfolgende Zeichenoperationen auf diesen Bereich zu beschränken – nützlich für abgerundete Bilder oder maskierte Füllungen.

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

Performance und setNeedsDisplay

draw(_:) läuft auf der CPU und ist vergleichsweise aufwendig. Lösen Sie mit setNeedsDisplay() nur bei Bedarf eine Neuzeichnung aus und halten Sie den Zeichen-Code schlank.

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

Offscreen-Rendering

Für wiederverwendbare Bitmaps rendern Sie mit UIGraphicsImageRenderer in ein Bild, statt in jedem Frame neu zu zeichnen.

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))
}

Schnelltest: Core Graphics

Testen Sie Ihr Verständnis des benutzerdefinierten Zeichnens.

Zusammenfassung: Benutzerdefiniertes Zeichnen mit Core Graphics

Überschreiben Sie draw(_:) und führen Sie Befehle im CGContext aus: Erstellen Sie Pfade mit Linien und Bézier-Kurven und zeichnen Sie anschließend Konturen oder Füllungen. Isolieren Sie Transformationen und Clipping mit saveGState()/restoreGState() und fügen Sie Farbverläufe, Schatten und Clips direkt hinzu.

Zeichnen ist eine CPU-intensive Aufgabe. Zeichnen Sie daher nur über setNeedsDisplay() neu und speichern Sie wiederverwendbare Bitmaps mit UIGraphicsImageRenderer zwischen.

Häufig gestellte Fragen

Ist die Lektion „Benutzerdefiniertes Zeichnen mit Core Graphics“ kostenlos?

Ja — der vollständige Text von „Benutzerdefiniertes Zeichnen mit Core Graphics“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Swift Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Swift Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Benutzerdefiniertes Zeichnen mit Core Graphics“?

Zeichnen Sie Pfade und Formen in draw(_:). Du übst Swift Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Swift Academy zu starten?

Keine Vorkenntnisse erforderlich. Swift Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Benutzerdefiniertes Zeichnen mit Core Graphics“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Swift Academy-Lektion Code schreiben und ausführen?

Ja. Jede Swift Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Grundlagen von CALayer
  2. Implizite und explizite Animationen
  3. Transformationen und 3D-Effekte
  4. Benutzerdefiniertes Zeichnen mit Core Graphics
← Zurück zu Swift Academy