Disegno personalizzato con Core Graphics
Disegni percorsi e forme in draw(_:).
Disegno personalizzato con Core Graphics è una lezione Swift Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Swift Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Swift Academy include 4 lezioni in totale.
Quando disegnare contenuti personalizzati
Quando livelli e immagini non sono sufficienti per esprimere una forma, ad esempio per grafici, firme o controlli personalizzati, disegnarla autonomamente con Core Graphics (Quartz 2D).
Eseguire l'override di draw(_:)
Creare una sottoclasse di UIView ed eseguire l'override di draw(_:). UIKit lo chiama con un contesto configurato; inserire lì i comandi di disegno.
import UIKit
final class ChartView: UIView {
override func draw(_ rect: CGRect) {
// drawing commands go here
}
}Il contesto grafico
All'interno di draw(_:), ottenere il CGContext corrente. È una superficie di disegno con stato: impostare colori e spessori delle linee, quindi tracciare o riempire.
override func draw(_ rect: CGRect) {
guard let ctx = UIGraphicsGetCurrentContext() else { return }
ctx.setFillColor(UIColor.systemTeal.cgColor)
ctx.fill(rect)
}Creare i tracciati
Un CGPath (o UIBezierPath) descrive linee, curve e forme. Spostarsi su un punto iniziale, quindi aggiungere linee e curve.
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()Tracciare e riempire
Il tracciamento definisce il contorno di un tracciato, mentre il riempimento ne colora l'interno. Impostare il colore e lo spessore, quindi chiamare stroke() o 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()Curve
Aggiungere curve uniformi con segmenti di Bézier quadratici (addQuadCurve) o cubici (addCurve), specificando i punti di controllo.
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))Stato del contesto: salvataggio e ripristino
Il contesto mantiene il proprio stato. Racchiudere trasformazioni e ritagli tra saveGState() e restoreGState(), in modo che le modifiche non si propaghino ai disegni successivi.
ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()Gradienti e ombre
Core Graphics disegna direttamente nel contesto gradienti (CGGradient con drawLinearGradient) e ombre (setShadow(offset:blur:color:)).
ctx.setShadow(offset: CGSize(width: 0, height: 2),
blur: 4,
color: UIColor.black.cgColor)Ritaglio
Aggiungere un tracciato e chiamare clip() per limitare i disegni successivi a quella regione: è utile per immagini arrotondate o riempimenti mascherati.
let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the ovalPrestazioni e setNeedsDisplay
draw(_:) viene eseguito sulla CPU ed è relativamente costoso. Avviare il ridisegno solo quando necessario tramite setNeedsDisplay() e mantenere leggero il codice di disegno.
func updateData() {
self.data = newData
setNeedsDisplay() // schedule one redraw
}Rendering fuori schermo
Per bitmap riutilizzabili, eseguire il rendering in un'immagine con UIGraphicsImageRenderer invece di ridisegnare ogni fotogramma.
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))
}Verifica rapida: Core Graphics
Verificare la propria comprensione del disegno personalizzato.
Riepilogo: disegno personalizzato con Core Graphics
Eseguire l'override di draw(_:) e inserire i comandi nel CGContext: creare tracciati con linee e curve di Bézier, quindi tracciarli o riempirli. Isolare trasformazioni e ritagli con saveGState()/restoreGState() e aggiungere direttamente gradienti, ombre e ritagli.
Il disegno richiede lavoro della CPU: ridisegnare solo tramite setNeedsDisplay() e memorizzare nella cache le bitmap riutilizzabili con UIGraphicsImageRenderer.
Domande Frequenti
La lezione «Disegno personalizzato con Core Graphics» è gratuita?
Sì — il testo completo di «Disegno personalizzato con Core Graphics» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Swift Academy, passa a CoddyKit PRO. Il corso Swift Academy include 4 lezioni in totale.
Cosa imparerò in «Disegno personalizzato con Core Graphics»?
Disegni percorsi e forme in draw(_:). Eserciti Swift Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Swift Academy?
Non è richiesta alcuna esperienza precedente. Swift Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.
Quanto tempo richiede la lezione «Disegno personalizzato con Core Graphics»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Swift Academy?
Sì. Ogni lezione Swift Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Fondamenti di CALayer
- Animazioni implicite ed esplicite
- Trasformazioni ed effetti 3D
- Disegno personalizzato con Core Graphics