0Pricing
Swift Academy · Lekcja

Niestandardowe rysowanie za pomocą Core Graphics

Rysowanie ścieżek i kształtów w draw(_:).

Niestandardowe rysowanie za pomocą Core Graphics to bezpłatna lekcja Swift Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Swift Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Swift Academy zawiera 4 lekcji w sumie.

Kiedy rysować niestandardową zawartość

Gdy warstwy i obrazy nie wystarczają do przedstawienia danego kształtu — na przykład wykresu, podpisu lub niestandardowego elementu sterującego — należy narysować go samodzielnie za pomocą Core Graphics (Quartz 2D).

Przesłanianie draw(_:)

Utwórz podklasę UIView i przesłoń metodę draw(_:). UIKit wywołuje ją ze skonfigurowanym kontekstem, w którym należy umieścić polecenia rysowania.

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

Kontekst graficzny

Wewnątrz draw(_:) pobierz bieżący CGContext. Jest to kontekstowy obszar roboczy: ustawiasz w nim kolory i szerokości linii, a następnie obrysowujesz lub wypełniasz kształty.

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

Tworzenie ścieżek

CGPath (lub UIBezierPath) opisuje linie, krzywe i kształty. Przejdź do punktu początkowego, a następnie dodawaj linie i krzywe.

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

Obrysowywanie i wypełnianie

Obrysowanie przedstawia kontur ścieżki, a wypełnienie koloruje jej wnętrze. Ustaw kolor i szerokość, a następnie wywołaj stroke() lub 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()

Krzywe

Dodawaj gładkie krzywe za pomocą kwadratowych (addQuadCurve) lub sześciennych (addCurve) odcinków Béziera, określając punkty kontrolne.

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

Stan kontekstu: zapisywanie i przywracanie

Kontekst zachowuje swój stan. Umieszczaj transformacje i przycinanie między wywołaniami saveGState()/restoreGState(), aby zmiany nie wpływały na późniejsze rysowanie.

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

Gradienty i cienie

Core Graphics rysuje gradienty (CGGradient za pomocą drawLinearGradient) i cienie (setShadow(offset:blur:color:)) bezpośrednio w kontekście.

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

Przycinanie

Dodaj ścieżkę i wywołaj clip(), aby ograniczyć kolejne rysowanie do tego obszaru — jest to przydatne w przypadku zaokrąglonych obrazów lub wypełnień z maską.

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

Wydajność i setNeedsDisplay

draw(_:) działa na procesorze CPU i jest stosunkowo kosztowna. Wywołuj ponowne rysowanie tylko wtedy, gdy jest potrzebne, za pomocą setNeedsDisplay(), i dbaj o zwięzłość kodu rysującego.

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

Renderowanie poza ekranem

W przypadku wielokrotnie używanych bitmap renderuj je do obrazu za pomocą UIGraphicsImageRenderer, zamiast rysować je ponownie w każdej klatce.

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

Szybkie sprawdzenie: Core Graphics

Sprawdź swoją wiedzę na temat niestandardowego rysowania.

Podsumowanie: niestandardowe rysowanie za pomocą Core Graphics

Przesłoń draw(_:) i wykonuj polecenia w CGContext: twórz ścieżki za pomocą linii i krzywych Béziera, a następnie obrysowuj je lub wypełniaj. Izoluj transformacje i przycinanie za pomocą saveGState()/restoreGState(), a gradienty, cienie i przycięcia dodawaj bezpośrednio.

Rysowanie obciąża procesor CPU — ponownie rysuj tylko za pomocą setNeedsDisplay(), a wielokrotnie używane bitmapy przechowuj w pamięci podręcznej za pomocą UIGraphicsImageRenderer.

Często zadawane pytania

Czy lekcja „Niestandardowe rysowanie za pomocą Core Graphics” jest bezpłatna?

Tak — pełny tekst „Niestandardowe rysowanie za pomocą Core Graphics” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Swift Academy, przejdź na CoddyKit PRO. Kurs Swift Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Niestandardowe rysowanie za pomocą Core Graphics”?

Rysowanie ścieżek i kształtów w draw(_:). Ćwiczysz Swift Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Swift Academy?

Nie wymagamy żadnego doświadczenia. Swift Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Niestandardowe rysowanie za pomocą Core Graphics”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Swift Academy?

Tak. Każda lekcja Swift Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podstawy CALayer
  2. Animacje niejawne i jawne
  3. Przekształcenia i efekty 3D
  4. Niestandardowe rysowanie za pomocą Core Graphics
← Powrót do Swift Academy