UIBezierPath: ano ito, mga paraan ng pagguhit at paano ito gumagana

Ano ang UIBezierPath?

UIBezierPath — isang klase ng UIKit framework, nagmamana ng NSObject at nag- iimplementa ng NSCopying, NSSecureCoding. Nagbibigay ito ng mataas na antas na Objective-C/Swift API para sa pagbuo at pagguhit ng mga vector contour. Sa loob, ang UIBezierPath ay nag-iimbak ng reference sa CGPathRef — isang Core Graphics object, ngunit nagdaragdag ng mga maginhawang pamamaraan para sa pagguhit, pagbabago ng geometry at pamamahala ng estilo.

Ang pangunahing bentahe ng UIBezierPath kumpara sa direktang paggamit ng CGPath ay ang mga built-in na paraan ng pagguhit. Ang pagtawag ng fill() o stroke() sa isang instance ng UIBezierPath ay awtomatikong nag- configure ng context at gumuhit ng path. Sinusuportahan din ng klase ang mga property na lineWidth, lineCapStyle, lineJoinStyle, miterLimit at flatness, na nagpapahintulot sa pamamahala ng hitsura nang walang hiwalay na bagay para sa pag- iimbak ng estilo.

Ang UIBezierPath ay ginagamit sa karamihan ng mga iOS application para sa custom na pagguhit sa loob ng UIView: mula sa mga simpleng icon hanggang sa kumplikadong animated na mga graph. Ang pamamaraang draw(_:) ng klase ng UIView ay ang pangunahing lugar kung saan gumagawa at gumuhit ang mga developer ng UIBezierPath. Ang klase ay ganap na katugma sa Core Animation at maaaring gamitin para sa animation ng path sa pamamagitan ng CAShapeLayer at CABasicAnimation.

Mga tuwid na linya at parihaba

Ang pamamaraang move(to:) ay naglilipat ng panimulang punto ng path sa ibinigay na mga coordinate nang hindi gumuguhit. Ito ay isang sapilitang tawag bago bumuo ng anumang segment. addLine(to:) ay nagdaragdag ng tuwid na segment mula sa kasalukuyang posisyon patungo sa tinukoy na punto. Para sa pagsasara ng contour, ginagamit ang pamamaraang close(), na gumuguhit ng linya mula sa huling punto patungo sa unang punto ng huling move(to:).

Mga parihaba na may bilugang sulok

UIBezierPath ay nagbibigay ng ilang maginhawang initializer para sa mga yari na hugis. init(rect:) gumagawa ng parihaba, init(roundedRect:cornerRadius:) — parihaba na may bilugang sulok. Ang parameter na UIRectCorner ay nagpapahintulot sa pagbilog lamang ng mga piling sulok, halimbawa topLeft at bottomRight, na iniiwan ang iba na tuwid. Ito ay malawakang ginagamit para sa paggawa ng custom na mga button at card.

init(ovalIn:) gumagawa ng ellipse na nakasulat sa ibinigay na parihaba. Kung ang parihaba ay isang parisukat, ang ellipse ay nagiging bilog. init(roundedRect:byRoundingCorners:cornerRadii:) — ang pinaka- flexible na variant, na nagpapahintulot sa pagtatakda ng iba't ibang radius para sa bawat sulok. Ang initializer na ito ay lumitaw sa iOS 6 at nananatiling pamantayan para sa paggawa ng mga bilugang 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()

Mga Bézier curve: quadratic at cubic

addQuadCurve(to:controlPoint:) nagdaragdag ng quadratic Bézier curve na may isang control point. Ang uri ng curve na ito ay ginagamit para sa simpleng makinis na pagyuko kapag kinakailangan na mabawasan ang bilang ng mga kalkulasyon. Ang quadratic curve ay palaging isang parabola at garantisadong nasa loob ng tatsulok na nabuo ng simula, control at dulo na mga punto.

Cubic Bézier curves

addCurve(to:controlPoint1:controlPoint2:) nagdaragdag ng cubic Bézier curve na may dalawang control point. Ang cubic curves ay ginagamit sa lahat ng modernong vector editor at TrueType font. Dalawang control point ang nagbibigay ng mas maraming antas ng kalayaan para sa tumpak na kontrol ng hugis ng curve. Ang pamamaraang ito ay inirerekomenda para sa pagbuo ng organic at kumplikadong mga contour.

Sa pagbuo ng mga curve, mahalagang sundin ang prinsipyo ng continuity — ang kinis ng curve sa punto ng pagkakabit ng mga segment. Para sa C1 continuity (tangent), ang control point ng susunod na curve ay dapat nasa parehong tuwid na linya kasama ang control point ng nauna. Para sa C2 continuity (curvature), kinakailangan ang mas kumplikadong pagkakasundo, na awtomatikong tinitiyak sa CAShapeLayer sa animation sa pagitan ng dalawang UIBezierPath na may parehong bilang ng mga control point.

Mga arko at bilog

addArc(withCenter:radius:startAngle:endAngle:clockwise:) nagdaragdag ng arko ng bilog na may ibinigay na mga parameter. Ang mga anggulo ay tinutukoy sa radians kaugnay sa gitna ng bilog. Ang zero angle ay tumutugma sa direksyon pakanan (alas-3 sa orasan). Ang parameter na clockwise ay tumutukoy sa direksyon: true — pakanan, false — pakaliwa. Ang mga arko ay mahalaga para sa mga pie chart, speedometer at interactive na progress ring.

Mga bilog at sektor

Para sa isang buong bilog, sapat na ang startAngle = 0 at endAngle = .pi * 2. Para sa paggawa ng sektor (bilang bahagi ng pie chart) gamitin ang addArc na sinusundan ng addLine(to:) sa gitna at close(). Ang UIBezierPath ay walang built-in na addCircle method — ang bilog ay ginagawa sa pamamagitan ng init(ovalIn:) na may parisukat na parihaba o sa pamamagitan ng addArc na may buong anggulo.

Ang pamamaraang addArc(withCenter:radius:startAngle:endAngle:clockwise:) ay awtomatikong nagsasagawa ng move(to:) sa panimulang punto ng arko kung ang kasalukuyang posisyon ay hindi tumutugma dito. Kung ang kasalukuyang posisyon ay iba, isang tuwid na linya ang iguguhit sa pagitan nito at ng simula ng arko. Ang pag- uugali na ito ay naiiba sa pagtatrabaho sa Core Graphics, kung saan kinakailangan ang isang explicit na move(to:) bago ang bawat bagong contour.

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

Pagpuno at pagbalangkas ng path

fill() pinupuno ang panloob na lugar ng path ng kasalukuyang fillColor o kulay na itinakda sa graphic context sa pamamagitan ng setFill(). Para sa mga path na may self- intersections, ang panuntunan sa pagpuno ay tinutukoy ng property na usesEvenOddFillRule. Kung ito ay true, ang even- odd na panuntunan ay inilalapat: ang isang punto ay itinuturing na nasa loob ng hugis kung ang isang sinag mula dito ay tumatawid sa contour ng kakaibang bilang ng beses.

Configuration ng balangkas

stroke() gumuhit ng contour ng path na may kasalukuyang mga setting ng lineWidth, lineCapStyle at lineJoinStyle. lineCapStyle tumutukoy sa hugis ng mga dulo ng bukas na segment: .butt (tuwid na hiwa), .round (kalahating bilog), .square (parisukat na may usli). lineJoinStyle tumutukoy sa hugis ng mga sulok ng pagkakabit: .miter (matalim), .round (bilugan), .bevel (pinutol).

Para sa mga putol- putol na linya, ginagamit ang property na setLineDash(_:count:phase:). Ito ay tumatanggap ng array ng mga haba ng alternating dash at space, bilang ng mga elemento at paunang phase. Ang visualization ng putol- putol na linya ay ginagawa sa yugto ng rasterization ng path — ang mga kumplikadong pattern ay hindi nagpapataas ng geometric complexity ng contour. Sinusuportahan ng CAShapeLayer ang animation ng strokeEnd property para sa epekto ng “pagguhit” ng linya mula simula hanggang dulo.

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

Halimbawa ng paggawa ng komplikadong hugis

Gumawa tayo ng custom na progress indicator sa anyo ng singsing gamit ang UIBezierPath. Ang singsing ay binuo mula sa dalawang arko na may parehong radius ngunit magkaibang kulay ng balangkas. Ang unang arko — isang buong kulay abong bilog (background), pangalawa — segment na nagpapakita ng progress. Para sa animation, ginagamit ang CAShapeLayer at CABasicAnimation.

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

Sa halimbawang ito, ang UIBezierPath ay ginagamit upang lumikha ng isang pabilog na contour, na pagkatapos ay ipinapasa sa CAShapeLayer sa pamamagitan ng cgPath property. Ang animation ng strokeEnd mula 0 hanggang 1 ay nagvi- visualize ng pagpuno ng singsing. Ang pamamaraang ito ay ginagamit sa mga loading indicator, fitness tracker at progress widget. Ang pamamaraang layoutSubviews ay ginagarantiyahan ang muling pagbuo ng path kapag nagbago ang laki ng View.

lineCap = .round nagdaragdag ng bilugang dulo sa arko, na nagbibigay sa indicator ng mas maayos na hitsura. Ang strokeEnd property ay isang animateable property ng CAShapeLayer na hindi nangangailangan ng pag- redraw ng buong contour sa bawat frame. Ang animation ay ganap na ginagawa sa GPU sa pamamagitan ng Core Animation, na tinitiyak ang 60 FPS nang hindi naglo- load ng CPU.