Swift Academy · leksjon

Egentegning med Core Graphics

Tegn baner og former i draw(_:).

Leksjon 4 av 413 trinn

Egentegning med Core Graphics er en gratis leksjon i Swift Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Swift Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Når egendefinert innhold bør tegnes

Når lag og bilder ikke kan uttrykke en form – for eksempel diagrammer, signaturer eller egendefinerte kontroller – tegner De den selv med Core Graphics (Quartz 2D).

Overstyre draw(_:)

Arv fra UIView og overstyr draw(_:). UIKit kaller metoden med en konfigurert kontekst, og der utsteder De tegnekommandoer.

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

Grafikkonteksten

Inne i draw(_:) henter De den gjeldende CGContext. Den fungerer som et lerret med tilstand: angi farger og linjebredder, og tegn deretter omriss eller fyll.

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

Bygge baner

En CGPath (eller UIBezierPath) beskriver linjer, kurver og former. Flytt til et startpunkt, og legg deretter til linjer og kurver.

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

Omriss og fyll

Omriss tegner kanten av en bane, mens fyll fargelegger innsiden. Angi farge og bredde, og kall deretter stroke() eller 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()

Kurver

Legg til jevne kurver med kvadratiske (addQuadCurve) eller kubiske (addCurve) Bezier-segmenter ved å angi kontrollpunkter.

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

Kontekstens tilstand: lagre og gjenopprett

Konteksten har tilstand. Pakk transformasjoner og klipping inn i saveGState()/restoreGState(), slik at endringer ikke påvirker senere tegning.

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

Gradienter og skygger

Core Graphics tegner gradienter (CGGradient med drawLinearGradient) og skygger (setShadow(offset:blur:color:)) direkte inn i konteksten.

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

Klipping

Legg til en bane og kall clip() for å begrense videre tegning til dette området – nyttig for avrundede bilder eller maskerte fyll.

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

Ytelse og setNeedsDisplay

draw(_:) kjøres på CPU-en og er relativt kostbar. Utløs omtegning bare ved behov med setNeedsDisplay(), og hold tegnekoden enkel.

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

Gjengivelse utenfor skjermen

For gjenbrukbare punktgrafikkbilder kan De gjengi til et bilde med UIGraphicsImageRenderer i stedet for å tegne på nytt for hver ramme.

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

Kunnskapssjekk: Core Graphics

Test forståelsen av egendefinert tegning.

Besvar den i den interaktive leksjonen

Oppsummering: egendefinert tegning med Core Graphics

Overstyr draw(_:) og utsted kommandoer til CGContext: bygg baner med linjer og Bezier-kurver, og tegn deretter omriss eller fyll. Isoler transformasjoner og klipping med saveGState()/restoreGState(), og legg til gradienter, skygger og klipp direkte.

Tegning bruker CPU-tid – tegn bare på nytt via setNeedsDisplay(), og hurtiglagre gjenbrukbar punktgrafikk med UIGraphicsImageRenderer.

Gratis å komme i gang

Lær deg Swift med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 122
Leksjoner: 409

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Egentegning med Core Graphics» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Swift Academy, inkludert «Egentegning med Core Graphics», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Swift Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Egentegning med Core Graphics»?

Tegn baner og former i draw(_:). Du øver på Swift Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Swift Academy?

Ingen tidligere erfaring er nødvendig. Swift Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Egentegning med Core Graphics»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Swift Academy-leksjonen?

Ja. Alle Swift Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Swift Academy