Swift Academy · Pelajaran

Menggambar Kustom dengan Core Graphics

Gambar jalur dan bentuk dalam draw(_:).

Pelajaran 4 dari 413 langkah

Menggambar Kustom dengan Core Graphics adalah pelajaran Swift Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Swift Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Swift Academy mencakup 4 pelajaran total.

Kapan Menggambar Konten Kustom

Saat layer dan gambar tidak dapat merepresentasikan suatu bentuk—seperti grafik, tanda tangan, atau kontrol kustom—Anda dapat menggambarnya sendiri dengan Core Graphics (Quartz 2D).

Mengganti draw(_:)

Buat subclass dari UIView dan ganti draw(_:). UIKit memanggilnya dengan konteks yang telah dikonfigurasi; Anda mengeluarkan perintah penggambaran di sana.

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

Konteks Grafis

Di dalam draw(_:), dapatkan CGContext saat ini. Ini adalah kanvas yang menyimpan status: Anda mengatur warna dan lebar garis, lalu melakukan stroke atau fill.

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

Membangun Path

CGPath (atau UIBezierPath) mendeskripsikan garis, kurva, dan bentuk. Pindahkan ke titik awal, lalu tambahkan garis dan kurva.

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

Melakukan Stroke dan Fill

Stroke menggambar garis luar sebuah path, sedangkan fill mewarnai bagian dalamnya. Atur warna dan lebar, lalu panggil stroke() atau 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()

Kurva

Tambahkan kurva halus dengan segmen Bezier kuadratik (addQuadCurve) atau kubik (addCurve), dengan menentukan titik kontrol.

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

Status Konteks: Menyimpan dan Memulihkan

Konteks menyimpan status. Bungkus transformasi dan clipping dalam saveGState()/restoreGState() agar perubahan tidak memengaruhi penggambaran berikutnya.

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

Gradien dan Bayangan

Core Graphics dapat menggambar gradien (CGGradient dengan drawLinearGradient) dan bayangan (setShadow(offset:blur:color:)) langsung ke dalam konteks.

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

Clipping

Tambahkan path dan panggil clip() untuk membatasi penggambaran berikutnya pada wilayah tersebut—berguna untuk gambar membulat atau fill yang diberi mask.

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

Performa dan setNeedsDisplay

draw(_:) berjalan di CPU dan relatif mahal. Picu penggambaran ulang hanya saat diperlukan melalui setNeedsDisplay(), dan jaga agar kode penggambaran tetap ringkas.

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

Penggambaran di Luar Layar

Untuk bitmap yang dapat digunakan kembali, render ke dalam gambar dengan UIGraphicsImageRenderer daripada menggambar ulang setiap frame.

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

Pemeriksaan Singkat: Core Graphics

Uji pemahaman Anda tentang penggambaran kustom.

Jawab di pelajaran interaktif

Ringkasan: Penggambaran Kustom dengan Core Graphics

Ganti draw(_:) dan keluarkan perintah ke CGContext: bangun path dengan garis dan kurva Bezier, lalu lakukan stroke atau fill. Pisahkan transformasi dan clipping dengan saveGState()/restoreGState(), lalu tambahkan gradien, bayangan, dan clip secara langsung.

Penggambaran menggunakan CPU—gambar ulang hanya melalui setNeedsDisplay() dan simpan bitmap yang dapat digunakan kembali dengan UIGraphicsImageRenderer.

Gratis untuk memulai

Belajar Swift dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 122
Pelajaran: 409

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Menggambar Kustom dengan Core Graphics” gratis?

Ya — teks lengkap “Menggambar Kustom dengan Core Graphics” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Swift Academy, upgrade ke CoddyKit PRO. Kursus Swift Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Menggambar Kustom dengan Core Graphics”?

Gambar jalur dan bentuk dalam draw(_:). Kamu berlatih Swift Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Swift Academy?

Tidak diperlukan pengalaman sebelumnya. Swift Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Menggambar Kustom dengan Core Graphics” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Swift Academy ini?

Ya. Setiap pelajaran Swift Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Swift Academy