UIBezierPath: mi ez, rajzolási metódusok és hogyan működik

Mi az UIBezierPath?

UIBezierPath — a UIKit keretrendszer osztálya, amely az NSObject-ből származik és implementálja az NSCopying, NSSecureCoding protokollokat. Magas szintű Objective-C/Swift API-t biztosít vektoros kontúrok építéséhez és rajzolásához. Belsőleg az UIBezierPath egy CGPathRef-re — egy Core Graphics objektumra — tárol referenciát, de kényelmes metódusokat ad hozzá a rajzoláshoz, geometria módosításához és stíluskezeléshez.

Az UIBezierPath fő előnye a CGPath közvetlen használatával szemben a beépített rajzolási metódusok. A fill() vagy stroke() hívása egy UIBezierPath példányon automatikusan konfigurálja a kontextust és kirajzolja az útvonalat. Az osztály támogatja a lineWidth, lineCapStyle, lineJoinStyle, miterLimit és flatness tulajdonságokat is, lehetővé téve a megjelenés kezelését külön stílustároló objektum nélkül.

Az UIBezierPath a legtöbb iOS-alkalmazásban használatos egyedi rajzoláshoz UIView-en belül: az egyszerű ikonoktól a bonyolult animált grafikonokig. A UIView osztály draw(_:) metódusa a fő hely, ahol a fejlesztők UIBezierPath-et hoznak létre és rajzolnak. Az osztály teljes mértékben kompatibilis a Core Animation-nel, és használható az útvonal animálására CAShapeLayer és CABasicAnimation segítségével.

Egyenes vonalak és téglalapok

A move(to:) metódus az útvonal kezdőpontját a megadott koordinátákra mozgatja rajzolás nélkül. Ez egy kötelező hívás bármely szegmens építése előtt. A addLine(to:) egy egyenes szakaszt ad hozzá az aktuális pozíciótól a megadott pontig. A kontúr lezárásához a close() metódus használatos, amely egy vonalat húz az utolsó ponttól az utolsó move(to:) első pontjáig.

Lekerekített sarkú téglalapok

Az UIBezierPath több kényelmes inicializálót biztosít kész alakzatokhoz. Az init(rect:) téglalapot hoz létre, az init(roundedRect:cornerRadius:) — lekerekített sarkú téglalapot. Az UIRectCorner paraméter lehetővé teszi csak a kiválasztott sarkok lekerekítését, például topLeft és bottomRight, a többit egyenesen hagyva. Ezt széles körben használják egyedi gombok és kártyák létrehozására.

Az init(ovalIn:) a megadott téglalapba írt ellipszist hoz létre. Ha a téglalap négyzet, az ellipszis körré alakul. Az init(roundedRect:byRoundingCorners:cornerRadii:) — a legrugalmasabb változat, lehetővé téve különböző sugarak beállítását minden sarokhoz. Ez az inicializáló az iOS 6-ban jelent meg, és továbbra is szabvány a lekerekített konténerek létrehozásához.

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

Bézier-görbék: másodfokú és köbös

A addQuadCurve(to:controlPoint:) egy másodfokú Bézier-görbét ad hozzá egy vezérlőponttal. Ez a görbetípus egyszerű sima hajlításokhoz használatos, amikor minimalizálni kell a számítások számát. A másodfokú görbe mindig parabola, és garantáltan a kezdő-, vezérlő- és végpontok által alkotott háromszögön belül helyezkedik el.

Köbös Bézier-görbék

A addCurve(to:controlPoint1:controlPoint2:) egy köbös Bézier-görbét ad hozzá két vezérlőponttal. A köbös görbéket minden modern vektorszerkesztőben és TrueType betűtípusban használják. Két vezérlőpont több szabadságfokot biztosít a görbe alakjának pontos szabályozásához. Ez a metódus ajánlott organikus és összetett kontúrok építéséhez.

A görbék építésénél fontos betartani a folytonosság elvét — a görbe simaságát a szegmensek csatlakozási pontjánál. A C1 folytonossághoz (érintő) a következő görbe vezérlőpontjának az előző vezérlőpontjával azonos egyenesen kell lennie. A C2 folytonossághoz (görbület) összetettebb illesztés szükséges, amelyet a CAShapeLayer automatikusan biztosít két azonos számú vezérlőponttal rendelkező UIBezierPath közötti animációnál.

Ívek és körök

A addArc(withCenter:radius:startAngle:endAngle:clockwise:) egy körívet ad hozzá a megadott paraméterekkel. A szögek radiánban vannak megadva a kör középpontjához viszonyítva. A nulla szög a jobbra iránynak felel meg (3 óra a számlapon). A clockwise paraméter határozza meg az irányt: true — az óramutató járásával megegyező, false — ellentétes. Az ívek nélkülözhetetlenek kördiagramokhoz, sebességmérőkhöz és interaktív előrehaladási gyűrűkhöz.

Körök és szektorok

Teljes körhöz elegendő a startAngle = 0 és endAngle = .pi * 2. Szektor létrehozásához (mint egy kördiagram része) használja a addArc-ot, majd addLine(to:)-t a középponthoz és close()-ot. Az UIBezierPath-nek nincs beépített addCircle metódusa — a kör az init(ovalIn:) segítségével négyzet alakú téglalappal vagy addArc segítségével teljes szöggel hozható létre.

A addArc(withCenter:radius:startAngle:endAngle:clockwise:) metódus automatikusan végrehajt egy move(to:)-t az ív kezdőpontjához, ha az aktuális pozíció nem esik egybe azzal. Ha az aktuális pozíció eltérő, egy egyenes vonal húzódik közte és az ív kezdete között. Ez a viselkedés eltér a Core Graphics-szel való munkától, ahol explicit move(to:) szükséges minden új kontúr előtt.

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

Az útvonal kitöltése és körvonalazása

A fill() kitölti az útvonal belső területét az aktuális fillColor színnel vagy a grafikai kontextusban a setFill()-en keresztül beállított színnel. Az önmetsző útvonalaknál a kitöltési szabályt a usesEvenOddFillRule tulajdonság határozza meg. Ha true, az even-odd szabály érvényesül: egy pont akkor tekintendő az alakzaton belülinek, ha a belőle induló sugár páratlan számú alkalommal metszi a kontúrt.

A körvonal konfigurálása

A stroke() az útvonal kontúrját rajzolja az aktuális lineWidth, lineCapStyle és lineJoinStyle beállításokkal. A lineCapStyle meghatározza a nyitott szegmensek végeinek alakját: .butt (egyenes vágás), .round (félkör alakú), .square (négyzetes kinyúlással). A lineJoinStyle meghatározza a csatlakozási sarkok alakját: .miter (éles), .round (lekerekített), .bevel (levágott).

Szaggatott vonalakhoz a setLineDash(_:count:phase:) tulajdonság használatos. Ez egy váltakozó szaggatások és hézagok hosszainak tömbjét, az elemek számát és a kezdeti fázist veszi át. A szaggatott vonal megjelenítése az útvonal raszterizálási szakaszában történik — az összetett minták nem növelik a kontúr geometriai komplexitását. A CAShapeLayer támogatja a strokeEnd tulajdonság animálását a vonal “rajzolásának” effektusához az elejétől a végéig.

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

Példa összetett alakzat létrehozására

Hozzunk létre egy egyedi előrehaladásjelzőt gyűrű formájában UIBezierPath segítségével. A gyűrű építése két azonos sugarú, de eltérő körvonal színű ívből történik. Az első ív egy teljes szürke kör (háttér), a második az előrehaladást mutató szegmens. Az animációhoz CAShapeLayer és CABasicAnimation használatos.

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

Ebben a példában az UIBezierPath egy körkörös kontúr létrehozására szolgál, amelyet aztán a cgPath tulajdonságon keresztül továbbítanak a CAShapeLayer-nek. A strokeEnd animációja 0-tól 1-ig vizualizálja a gyűrű kitöltését. Ezt a megközelítést használják betöltésjelzőkben, fitneszkövetőkben és előrehaladás widgetekben. A layoutSubviews metódus garantálja az útvonal újraépítését a View méreteinek változásakor.

A lineCap = .round lekerekített végeket ad az ívhez, ami rendezettebb megjelenést kölcsönöz a jelzőnek. A strokeEnd tulajdonság a CAShapeLayer egy animálható tulajdonsága, amely nem igényli a teljes kontúr újrarajzolását minden egyes képkockában. Az animáció teljes egészében a GPU-n történik a Core Animation segítségével, ami 60 FPS-t biztosít CPU terhelés nélkül.