UIBezierPath: was es ist, Zeichenmethoden und wie es funktioniert

Was ist UIBezierPath?

UIBezierPath ist eine Klasse des UIKit-Frameworks, die von NSObject erbt und NSCopying, NSSecureCoding implementiert. Sie bietet eine hochrangige Objective-C/Swift-API zum Erstellen und Zeichnen von Vektorpfaden. Intern speichert UIBezierPath einen Verweis auf CGPathRef ein Core Graphics-Objekt, fügt jedoch bequeme Methoden zum Zeichnen, zur Geometrieänderung und zur Stilverwaltung hinzu.

Der Hauptvorteil von UIBezierPath gegenüber der direkten Verwendung von CGPath sind die integrierten Zeichenmethoden. Der Aufruf von fill() oder stroke() auf einer UIBezierPath-Instanz konfiguriert automatisch den Kontext und zeichnet den Pfad. Die Klasse unterstützt auch die Eigenschaften lineWidth, lineCapStyle, lineJoinStyle, miterLimit und flatness, sodass das Aussehen ohne ein separates Objekt zur Stilspeicherung gesteuert werden kann.

UIBezierPath wird in den meisten iOS-Anwendungen für benutzerdefinierte Zeichnungen innerhalb von UIView verwendet: von einfachen Symbolen bis zu komplexen animierten Diagrammen. Die draw(_:)-Methode der UIView-Klasse ist der Hauptort, an dem Entwickler UIBezierPath erstellen und zeichnen. Die Klasse ist vollständig mit Core Animation kompatibel und kann für Pfadanimationen über CAShapeLayer und CABasicAnimation verwendet werden.

Gerade Linien und Rechtecke

Die move(to:)-Methode verschiebt den Startpunkt des Pfades zu den angegebenen Koordinaten, ohne zu zeichnen. Dies ist ein erforderlicher Aufruf vor dem Erstellen eines Segments. addLine(to:) fügt ein gerades Segment von der aktuellen Position zum angegebenen Punkt hinzu. Die close()-Methode schließt den Kontur, indem sie eine Linie vom letzten Punkt zum ersten Punkt des letzten move(to:) zeichnet.

Rechtecke mit abgerundeten Ecken

UIBezierPath bietet mehrere praktische Initialisierer für vorgefertigte Formen. init(rect:) erstellt ein Rechteck, init(roundedRect:cornerRadius:) erstellt ein Rechteck mit abgerundeten Ecken. Der Parameter UIRectCorner ermöglicht es, nur ausgewählte Ecken abzurunden, z. B. topLeft und bottomRight, während die anderen gerade bleiben. Dies wird häufig zum Erstellen benutzerdefinierter Schaltflächen und Karten verwendet.

init(ovalIn:) erstellt eine Ellipse, die in das angegebene Rechteck eingeschrieben ist. Wenn das Rechteck ein Quadrat ist, wird die Ellipse zu einem Kreis. init(roundedRect:byRoundingCorners:cornerRadii:) ist die flexibelste Option, die unterschiedliche Radien für jede Ecke ermöglicht. Dieser Initialisierer wurde in iOS 6 eingeführt und bleibt der Standard für die Erstellung abgerundeter Container.

let path = UIBezierPath()
path.move(to: CGPoint(x: 50, y: 50))
path.addLine(to: CGPoint(x: 200, y: 50))
path.addLine(to: CGPoint(x: 200, y: 150))
path.addLine(to: CGPoint(x: 125, y: 200))
path.addLine(to: CGPoint(x: 50, y: 150))
path.close()

Bezier-Kurven: quadratische und kubische

addQuadCurve(to:controlPoint:) fügt eine quadratische Bezier-Kurve mit einem Kontrollpunkt hinzu. Diese Art von Kurve wird für einfache glatte Biegungen verwendet, wenn Berechnungen minimiert werden sollen. Eine quadratische Kurve ist immer eine Parabel und liegt garantiert innerhalb des Dreiecks, das durch Start-, Kontroll- und Endpunkt gebildet wird.

Kubische Bezier-Kurven

addCurve(to:controlPoint1:controlPoint2:) fügt eine kubische Bezier-Kurve mit zwei Kontrollpunkten hinzu. Kubische Kurven werden in allen modernen Vektoreditoren und TrueType-Schriftarten verwendet. Zwei Kontrollpunkte bieten mehr Freiheitsgrade für eine präzise Formsteuerung. Diese Methode wird für den Aufbau organischer und komplexer Konturen empfohlen.

Beim Konstruieren von Kurven ist es wichtig, das Kontinuitätsprinzip einzuhalten die Glätte am Verbindungspunkt der Segmente. Für C1-Kontinuität (Tangente) muss der Kontrollpunkt der nächsten Kurve auf derselben Linie liegen wie der Kontrollpunkt der vorherigen. Für C2-Kontinuität (Krümmung) ist eine komplexere Koordination erforderlich, die in CAShapeLayer beim Animieren zwischen zwei UIBezierPath mit derselben Anzahl von Kontrollpunkten automatisch bereitgestellt wird.

Bögen und Kreise

addArc(withCenter:radius:startAngle:endAngle:clockwise:) fügt einen Kreisbogen mit den angegebenen Parametern hinzu. Winkel werden in Bogenmaß relativ zum Kreismittelpunkt angegeben. Der Nullwinkel entspricht der Richtung nach rechts (3 Uhr auf einem Zifferblatt). Der Parameter clockwise bestimmt die Richtung: true im Uhrzeigersinn, false gegen den Uhrzeigersinn. Bögen sind unverzichtbar für Kreisdiagramme, Tachometer und interaktive Fortschrittsringe.

Kreise und Sektoren

Für einen vollständigen Kreis verwenden Sie startAngle = 0 und endAngle = .pi * 2. Um einen Sektor (als Teil eines Kreisdiagramms) zu erstellen, verwenden Sie addArc gefolgt von addLine(to:) zum Mittelpunkt und close(). UIBezierPath hat keine integrierte addCircle-Methode ein Kreis wird über init(ovalIn:) mit einem quadratischen Rechteck oder über addArc mit einem vollständigen Winkel erstellt.

Die addArc(withCenter:radius:startAngle:endAngle:clockwise:)-Methode führt automatisch move(to:) zum Startpunkt des Bogens aus, wenn die aktuelle Position nicht damit übereinstimmt. Wenn die aktuelle Position abweicht, wird eine gerade Linie zwischen ihr und dem Bogenanfang gezeichnet. Dieses Verhalten unterscheidet sich von Core Graphics, wo ein explizites move(to:) vor jedem neuen Kontur erforderlich ist.

let center = CGPoint(x: 150, y: 150)
let slice = UIBezierPath()
slice.move(to: center)
slice.addArc(
    withCenter: center,
    radius: 100,
    startAngle: 0,
    endAngle: .pi * 0.75,
    clockwise: true
)
slice.close()

Füllung und Kontur des Pfades

fill() füllt den Innenbereich des Pfades mit der aktuellen fillColor oder der im Grafikkontext über setFill() festgelegten Farbe. Für sich selbst schneidende Pfade wird die Füllregel durch die Eigenschaft usesEvenOddFillRule bestimmt. Wenn sie true ist, wird die Even-Odd-Regel verwendet: Ein Punkt gilt als innerhalb der Form, wenn ein Strahl von ihm den Kontur ungerade oft kreuzt.

Kontureinstellungen

stroke() zeichnet den Pfadkontur mit den aktuellen Einstellungen lineWidth, lineCapStyle und lineJoinStyle. lineCapStyle definiert die Form der Enden offener Segmente: .butt (gerader Schnitt), .round (halbkreisförmig), .square (quadratisch mit Überstand). lineJoinStyle definiert die Form der Eckverbindungen: .miter (spitz), .round (abgerundet), .bevel (abgeschrägt).

Für gestrichelte Linien wird die Eigenschaft setLineDash(_:count:phase:) verwendet. Sie akzeptiert ein Array abwechselnder Strich- und Lückenlängen, die Anzahl der Elemente und die Anfangsphase. Die Darstellung von Strichelung erfolgt während der Rasterisierung des Pfades komplexe Muster erhöhen nicht die geometrische Komplexität des Konturs. CAShapeLayer unterstützt die Animation der Eigenschaft strokeEnd für einen „Zeichen”-Effekt von Anfang bis Ende.

override func draw(_ rect: CGRect) {
    let path = UIBezierPath(ovalIn: CGRect(x: 50, y: 50, width: 200, height: 200))
    UIColor.blue.setFill()
    UIColor.black.setStroke()
    path.lineWidth = 4
    path.fill()
    path.stroke()
}

Beispiel zur Erstellung einer komplexen Figur

Erstellen wir einen benutzerdefinierten Fortschrittsindikator in Form eines Rings mit UIBezierPath. Der Ring wird aus zwei Bögen mit gleichem Radius und unterschiedlichen Konturfarben aufgebaut. Der erste Bogen ist ein vollständiger Kreis in Grau (Hintergrund), der zweite ein Segment, das den Fortschritt anzeigt. Für die Animation werden CAShapeLayer und CABasicAnimation verwendet.

class RingView: UIView {

    private let progressLayer = CAShapeLayer()

    override func layoutSubviews() {
        super.layoutSubviews()
        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = bounds.width * 0.4
        let lineWidth: CGFloat = 12

        let backgroundRing = UIBezierPath()
        backgroundRing.addArc(withCenter: center, radius: radius,
                          startAngle: -.pi / 2, endAngle: .pi * 1.5, clockwise: true)

        progressLayer.path = backgroundRing.cgPath
        progressLayer.strokeColor = UIColor.systemBlue.cgColor
        progressLayer.lineWidth = lineWidth
        progressLayer.lineCap = .round
        progressLayer.fillColor = UIColor.clear.cgColor
        progressLayer.strokeEnd = 0
        layer.addSublayer(progressLayer)
    }

    func animateProgress(to value: CGFloat) {
        CABasicAnimation(keyPath: "strokeEnd").apply {
            $0.toValue = value
            $0.duration = 1.5
            $0.timingFunction = CAMediaTimingFunction(name: .easeOut)
            progressLayer.add($0, forKey: nil)
        }
        progressLayer.strokeEnd = value
    }
}

In diesem Beispiel wird UIBezierPath verwendet, um einen kreisförmigen Kontur zu erstellen, der dann über die Eigenschaft cgPath an CAShapeLayer übergeben wird. Die Animation von strokeEnd von 0 bis 1 visualisiert die Füllung des Rings. Dieser Ansatz wird in Ladeanzeigen, Fitness-Trackern und Fortschrittswidgets verwendet. Die Methode layoutSubviews garantiert den Wiederaufbau des Pfades bei Größenänderung der View.

lineCap = .round fügt abgerundete Enden zum Bogen hinzu, was dem Indikator ein gepflegteres Aussehen verleiht. Die Eigenschaft strokeEnd ist eine animierbare Eigenschaft von CAShapeLayer, die kein Neuzeichnen des gesamten Konturs in jedem Frame erfordert. Die Animation läuft vollständig auf der GPU über Core Animation und gewährleistet 60 FPS ohne CPU-Belastung.