UIBezierPath: bu nima, chizish metodlari va qanday ishlaydi

UIBezierPath nima?

UIBezierPath — NSObject dan meros olgan va NSCopying, NSSecureCoding ni tatbiq qiluvchi UIKit framework sinfi. U vektor konturlarini qurish va chizish uchun yuqori darajali Objective-C/Swift API ni ta‘minlaydi. Ichki jihatdan, UIBezierPath CGPathRef ga — Core Graphics ob”yektiga havola saqlaydi, lekin chizish, geometriyani o‘zgartirish va uslublarni boshqarish uchun qulay metodlar qo‘shadi.

UIBezierPath ning CGPath dan to‘g‘ridan-to‘g‘ri foydalanishga nisbatan asosiy afzalligi o‘rnatilgan chizish metodlari dir. UIBezierPath namunasida fill() yoki stroke() chaqiruvi avtomatik ravishda kontekstni sozlaydi va yo‘lni chizadi. SinflineWidth, lineCapStyle, lineJoinStyle, miterLimit va flatness xususiyatlarini ham qo‘llab-quvvatlaydi, bu esa uslublarni saqlash uchun alohida ob”yektsiz tashqi ko‘rinishni boshqarishga imkon beradi.

UIBezierPath ko‘p iOS ilovalarida UIView ichida maxsus chizish uchun ishlatiladi: oddiy piktogrammalardan tortib murakkab animatsion grafiklargacha. UIView sinfining draw(_:) metodi — dasturchilar UIBezierPath yaratadigan va chizadigan asosiy joy. Sinfli Core Animation bilan to‘liq mos keladi va CAShapeLayer va CABasicAnimation orqali yo‘l animatsiyasi uchun ishlatilishi mumkin.

To‘g‘ri chiziqlar va to‘rtburchaklar

move(to:) metodi yo‘lning boshlang‘ich nuqtasini berilgan koordinatalarga chizmasdan ko‘chiradi. Bu har qanday segmentni qurishdan oldin majburiy chaqiruvdir. addLine(to:) joriy pozitsiyadan ko‘rsatilgan nuqtaga to‘g‘ri chiziq segmenti qo‘shadi. Konturni yopish uchun close() metodi ishlatiladi, u oxirgi nuqtadan oxirgi move(to:) ning birinchi nuqtasiga chiziq tortadi.

Yumaloq burchakli to‘rtburchaklar

UIBezierPath tayyor figuralar uchun bir nechta qulay boshlovchilarni ta‘minlaydi. init(rect:) to‘rtburchak yaratadi, init(roundedRect:cornerRadius:) — yumaloq burchakli to‘rtburchak. UIRectCorner parametri faqat tanlangan burchaklarni yumaloqlashga imkon beradi, masalan topLeft va bottomRight, qolganlarini to‘g‘ri qoldirib. Bu maxsus tugmalar va kartalar yaratishda keng qo‘llaniladi.

init(ovalIn:) berilgan to‘rtburchak ichiga chizilgan ellips yaratadi. Agar to‘rtburchak kvadrat bo‘lsa, ellips aylanaga aylanadi. init(roundedRect:byRoundingCorners:cornerRadii:) — eng moslashuvchan variant, har bir burchak uchun turli radiuslarni o‘rnatishga imkon beradi. Bu boshlovchi iOS 6 da paydo bo‘ldi va yumaloq konteynerlar yaratish uchun standart bo‘lib qolmoqda.

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 egri chiziqlari: kvadrat va kub

addQuadCurve(to:controlPoint:) bitta boshqaruv nuqtasi bilan kvadrat Bezier egri chizig‘ini qo‘shadi. Bu egri chiziq turi hisob-kitoblarni minimallashtirish talab qilinganda oddiy silliq burmalar uchun ishlatiladi. Kvadrat egri chiziq har doim parabola bo‘lib, boshlang‘ich, boshqaruv va tugash nuqtalari hosil qilgan uchburchak ichida yotadi.

Kub Bezier egri chiziqlari

addCurve(to:controlPoint1:controlPoint2:) ikkita boshqaruv nuqtasi bilan kub Bezier egri chizig‘ini qo‘shadi. Kub egri chiziqlari barcha zamonaviy vektor muharrirlarida va TrueType shriftlarida ishlatiladi. Ikkita boshqaruv nuqtasi egri chiziq shaklini aniq boshqarish uchun ko‘proq erkinlik darajalarini beradi. Bu metod organik va murakkab konturlarni qurish uchun tavsiya etiladi.

Egri chiziqlarni qurishda davomiylik printsipiga rioya qilish muhim — segmentlarning tutashuv nuqtasida egri chiziqning silliqligi. C1 davomiyligi (urinma) uchun keyingi egri chiziqning boshqaruv nuqtasi oldingisining boshqaruv nuqtasi bilan bir xil to‘g‘ri chiziqda yotishi kerak. C2 davomiyligi (egrilik) uchun murakkabroq moslashtirish talab qilinadi, bu CAShapeLayer da bir xil sonli boshqaruv nuqtalariga ega ikkita UIBezierPath o‘rtasida animatsiya paytida avtomatik ta‘minlanadi.

Yoylar va doiralar

addArc(withCenter:radius:startAngle:endAngle:clockwise:) berilgan parametrlar bilan aylana yoyini qo‘shadi. Burchaklar aylana markaziga nisbatan radianlarda ko‘rsatiladi. Nol burchak o‘ng tomonga mos keladi (soatda 3). Clockwise parametri yo‘nalishni belgilaydi: true — soat yo‘nalishi bo‘yicha, false — teskari. Yoylar doiraviy diagrammalar, spidometrlar va interaktiv progress halqalari uchun ajralmasdir.

Doiralar va sektorlar

To‘liq aylana uchun startAngle = 0 va endAngle = .pi * 2 yetarli. Sektor yaratish uchun (doiraviy diagrammaning bir qismi sifatida) addArc dan so‘ng markazga addLine(to:) va close() dan foydalaning. UIBezierPath ning o‘rnatilgan addCircle metodi yo‘q — aylana kvadrat to‘rtburchak bilan init(ovalIn:) yoki to‘liq burchak bilan addArc orqali yaratiladi.

addArc(withCenter:radius:startAngle:endAngle:clockwise:) metodi, joriy pozitsiya yoyning boshlang‘ich nuqtasiga mos kelmasa, avtomatik ravishda move(to:) ni bajaradi. Agar joriy pozitsiya boshqacha bo‘lsa, u bilan yoy boshi o‘rtasida to‘g‘ri chiziq tortiladi. Bu xatti-harakat Core Graphics bilan ishlashdan farq qiladi, burada har bir yangi konturdan oldin aniq move(to:) talab qilinadi.

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

Yo‘lni to‘ldirish va konturlash

fill() yo‘lning ichki qismini joriy fillColor rangi yoki setFill() orqali grafik kontekstda o‘rnatilgan rang bilan to‘ldiradi. O‘z-o‘zini kesuvchi yo‘llar uchun to‘ldirish qoidasi usesEvenOddFillRule xususiyati bilan aniqlanadi. Agar true bo‘lsa, even-odd qoidasi qo‘llaniladi: nuqta figuraning ichida hisoblanadi, agarda undan chiqadigan nur konturni toq son marta kesib o‘tsa.

Konturni sozlash

stroke() yo‘l konturini joriy lineWidth, lineCapStyle va lineJoinStyle sozlamalari bilan chizadi. lineCapStyle ochiq segmentlarning uchlari shaklini belgilaydi: .butt (to‘g‘ri kesim), .round (yarim doira), .square (chiqishli kvadrat). lineJoinStyle birlashma burchaklarining shaklini belgilaydi: .miter (o‘tkir), .round (yumaloq), .bevel (kesilgan).

Chiziqli chiziqlar uchun setLineDash(_:count:phase:) xususiyati ishlatiladi. U navbatlashuvchi chiziq va bo‘shliqlar uzunliklari massivi, elementlar soni va boshlang‘ch fazani qabul qiladi. Chiziqli chiziqning vizualizatsiyasi yo‘lning rastrlashtirish bosqichida amalga oshiriladi — murakkab naqshlar konturning geometrik murakkabligini oshirmaydi. CAShapeLayer chiziqning boshidan oxirigacha chizilish effekti uchun strokeEnd xususiyati animatsiyasini qo‘llab-quvvatlaydi.

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

Murakkab figurani yaratish namunasi

UIBezierPath yordamida halqa shaklida maxsus progress ko‘rsatkichini yarataylik. Halqa quriladi bir xil radiusli ikkita yoydan, lekin turli kontur rangi bilan. Birinchi yoy — kulrang to‘liq aylana (fon), ikkinchi — progressni ko‘rsatuvchi segment. Animatsiya uchun CAShapeLayer va CABasicAnimation ishlatiladi.

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

Ushbu misolda UIBezierPath aylana kontur yaratish uchun ishlatiladi, keyin cgPath xususiyati orqali CAShapeLayer ga uzatiladi. strokeEnd ning 0 dan 1 gacha animatsiyasi halqaning to‘ldirilishini vizualizatsiya qiladi. Bu yondashuv yuklash ko‘rsatkichlari, fitness kuzatuvchilari va progress vidjetlarida qo‘llaniladi. layoutSubviews metodi View o‘lchamlari o‘zgarganda yo‘lning qayta qurilishini ta‘minlaydi.

lineCap = .round yoy uchlariga yumaloq shakl qo‘shadi, bu ko‘rsatkichga yanada tartibli ko‘rinish beradi. strokeEnd xususiyati CAShapeLayer ning animatsiya qilinadigan xususiyati bo‘lib, u har bir kadrda butun konturni qayta chizishni talab qilmaydi. Animatsiya to‘liq GPU da Core Animation orqali bajariladi, bu esa CPU ni yuklamasdan 60 FPS ni ta‘minlaydi.