UIBezierPath: bu nədir, rəsm metodları və necə işləyir

UIBezierPath nədir?

UIBezierPath — NSObject-dən miras alan və NSCopying, NSSecureCoding-i tətbiq edən UIKit framework sinfi. O, vektor konturlarının qurulması və çəkilməsi üçün yüksək səviyyəli Objective-C/Swift API təmin edir. Daxili olaraq UIBezierPath CGPathRef-ə — Core Graphics obyektinə istinad saxlayır, lakin rəsm çəkmə, həndəsə dəyişdirmə və üslubları idarə etmək üçün rahat metodlar əlavə edir.

UIBezierPath-in CGPath-in birbaşa istifadəsi ilə müqayisədə əsas üstünlüyü daxili rəsm metodlarıdır. UIBezierPath nümunəsində fill() və ya stroke() çağırışı avtomatik olaraq konteksti konfiqurasiya edir və yolu çəkir. Sinif həmçinin lineWidth, lineCapStyle, lineJoinStyle, miterLimit və flatness xüsusiyyətlərini dəstəkləyir ki, bu da üslubları saxlamaq üçün ayrıca obyekt olmadan görünüşü idarə etməyə imkan verir.

UIBezierPath əksər iOS tətbiqlərində UIView daxilində fərdi rəsm çəkmək üçün istifadə olunur: sadə nişanlardan tutmuş mürəkkəb animasiyalı qrafiklərə qədər. UIView sinfinin draw(_:) metodu — tərtibatçıların UIBezierPath yaratdığı və çəkdiyi əsas yerdir. Sinif Core Animation ilə tam uyğundur və CAShapeLayer və CABasicAnimation vasitəsilə yol animasiyası üçün istifadə edilə bilər.

Düz xətlər və düzbucaqlılar

move(to:) metodu yolun başlanğıc nöqtəsini göstərilən koordinatlara rəsm çəkmədən köçürür. Bu, hər hansı bir seqment qurmadan əvvəl məcburi çağırışdır. addLine(to:) cari mövqedən göstərilən nöqtəyə düz xətt seqmenti əlavə edir. Konturu bağlamaq üçün close() metodu istifadə olunur ki, bu da son nöqtədən sonuncu move(to:)-nun ilk nöqtəsinə xətt çəkir.

Dairəvi künclü düzbucaqlılar

UIBezierPath hazır fiqurlar üçün bir neçə rahat başlatıcı təmin edir. init(rect:) düzbucaqlı yaradır, init(roundedRect:cornerRadius:) — dairəvi künclü düzbucaqlı. UIRectCorner parametri yalnız seçilmiş küncləri dairəvi etməyə imkan verir, məsələn topLeft və bottomRight, qalanlarını düz buraxaraq. Bu, fərdi düymələr və kartlar yaratmaq üçün geniş istifadə olunur.

init(ovalIn:) verilmiş düzbucaqlıya yazılmış ellips yaradır. Düzbucaqlı kvadratdırsa, ellips dairəyə çevrilir. init(roundedRect:byRoundingCorners:cornerRadii:) — ən çevik variant, hər künc üçün fərqli radius təyin etməyə imkan verir. Bu başlatıcı iOS 6-da ortaya çıxdı və dairəvi konteynerlər yaratmaq üçün standart olaraq qalır.

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 əyriləri: kvadrat və kub

addQuadCurve(to:controlPoint:) bir idarəetmə nöqtəsi ilə kvadrat Bezier əyrisi əlavə edir. Bu əyri növü hesablamaları minimuma endirmək tələb olunduqda sadə hamar əyilmələr üçün istifadə olunur. Kvadrat əyri həmişə paraboladır və başlanğıc, idarəetmə və son nöqtələrin əmələ gətirdiyi üçbucağın daxilində yerləşir.

Kub Bezier əyriləri

addCurve(to:controlPoint1:controlPoint2:) iki idarəetmə nöqtəsi ilə kub Bezier əyrisi əlavə edir. Kub əyriləri bütün müasir vektor redaktorlarında və TrueType şriftlərində istifadə olunur. İki idarəetmə nöqtəsi əyrinin formasını dəqiq idarə etmək üçün daha çox sərbəstlik dərəcəsi verir. Bu metod üzvi və mürəkkəb konturlar qurmaq üçün tövsiyə olunur.

Əyrilər qurarkən davamlılıq prinsipinə riayət etmək vacibdir — seqmentlərin birləşmə nöqtəsində əyrinin hamarlığı. C1 davamlılığı (toxunan) üçün növbəti əyrinin idarəetmə nöqtəsi əvvəlkinin idarəetmə nöqtəsi ilə eyni düz xətt üzərində olmalıdır. C2 davamlılığı (əyrilik) üçün daha mürəkkəb uyğunlaşdırma tələb olunur ki, bu da CAShapeLayer-də eyni sayda idarəetmə nöqtəsi olan iki UIBezierPath arasında animasiya zamanı avtomatik təmin edilir.

Qövslər və dairələr

addArc(withCenter:radius:startAngle:endAngle:clockwise:) verilmiş parametrlərlə dairə qövsü əlavə edir. Bucaqlar dairənin mərkəzinə nisbətən radyanlarla göstərilir. Sıfır bucaq sağa istiqamətə uyğundur (saatda 3). Clockwise parametri istiqaməti müəyyən edir: true — saat əqrəbi istiqamətində, false — əksinə. Qövslər dairəvi diaqramlar, spidometrlər və interaktiv irəliləyiş halqaları üçün əvəzolunmazdır.

Dairələr və sektorlar

Tam dairə üçün startAngle = 0 və endAngle = .pi * 2 kifayətdir. Sektor yaratmaq üçün (dairəvi diaqramın hissəsi kimi) addArc-dən sonra mərkəzə addLine(to:) və close() istifadə edin. UIBezierPath-in daxili addCircle metodu yoxdur — dairə kvadrat düzbucaqlı ilə init(ovalIn:) və ya tam bucaqlı addArc vasitəsilə yaradılır.

addArc(withCenter:radius:startAngle:endAngle:clockwise:) metodu, cari mövqe qövsün başlanğıc nöqtəsi ilə üst-üstə düşmürsə, avtomatik olaraq həmin nöqtəyə move(to:) yerinə yetirir. Cari mövqe fərqlidirsə, onunla qövsün başlanğıcı arasında düz xətt çəkilir. Bu davranış Core Graphics ilə işləməkdən fərqlənir, burada hər yeni konturdan əvvəl açıq move(to:) tələb olunur.

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

Yolun doldurulması və konturu

fill() yolun daxili sahəsini cari fillColor rəngi və ya setFill() vasitəsilə qrafik kontekstdə təyin edilmiş rənglə doldurur. Öz-özünü kəsən yollar üçün doldurma qaydası usesEvenOddFillRule xüsusiyyəti ilə müəyyən edilir. true olarsa, even-odd qaydası tətbiq olunur: nöqtə fiqurun daxilində sayılır, əgər ondan çıxan şüa konturu tək sayda kəsirsə.

Konturun konfiqurasiyası

stroke() yolun konturunu cari lineWidth, lineCapStyle və lineJoinStyle parametrləri ilə çəkir. lineCapStyle açıq seqmentlərin uclarının formasını müəyyən edir: .butt (düz kəsim), .round (yarımdairəvi), .square (çıxıntılı kvadrat). lineJoinStyle birləşmə künclərinin formasını təyin edir: .miter (iti), .round (dairəvi), .bevel (kəsilmiş).

Kesik xətlər üçün setLineDash(_:count:phase:) xüsusiyyəti istifadə olunur. O, növbələşən tire və boşluqların uzunluqları massivi, elementlərin sayı və başlanğıc fazanı qəbul edir. Kesik xəttin vizuallaşdırılması yolun rastrlaşdırılması mərhələsində həyata keçirilir — mürəkkəb naxışlar konturun həndəsi mürəkkəbliyini artırmır. CAShapeLayer xəttin əvvəldən sona çəkilməsi effekti üçün strokeEnd xüsusiyyətinin animasiyasını dəstəkləyir.

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

Mürəkkəb fiqurun yaradılması nümunəsi

UIBezierPath istifadə edərək halqa şəklində fərdi irəliləyiş göstəricisi yaradaq. Halqa qurulur eyni radiuslu iki qövslə, lakin fərqli kontur rəngi ilə. Birinci qövs — boz rəngli tam dairə (fon), ikinci — irəliləyişi göstərən seqment. Animasiya üçün CAShapeLayer və CABasicAnimation istifadə olunur.

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

Bu nümunədə UIBezierPath dairəvi kontur yaratmaq üçün istifadə olunur, sonra cgPath xüsusiyyəti vasitəsilə CAShapeLayer-ə ötürülür. strokeEnd-in 0-dan 1-ə animasiyası halqanın doldurulmasını vizuallaşdırır. Bu yanaşma yükləmə göstəricilərində, fitness trekerlərində və irəliləyiş vidjetlərində tətbiq olunur. layoutSubviews metodu View ölçüləri dəyişdikdə yolun yenidən qurulmasını təmin edir.

lineCap = .round qövsün uclarına dairəvi forma əlavə edir ki, bu da göstəriciyə daha səliqəli görünüş verir. strokeEnd xüsusiyyəti CAShapeLayer-in animasiya edilə bilən xüsusiyyətidir və hər kadrda bütün konturun yenidən çəkilməsini tələb etmir. Animasiya tamamilə GPU-da Core Animation vasitəsilə yerinə yetirilir ki, bu da CPU-nu yükləmədən 60 FPS təmin edir.