UIBezierPath: यह क्या है, ड्राइंग विधियाँ और यह कैसे काम करता है

UIBezierPath क्या है?

UIBezierPath UIKit फ्रेमवर्क का एक वर्ग है जो NSObject से विरासत प्राप्त करता है और NSCopying, NSSecureCoding को लागू करता है। यह वेक्टर पथ बनाने और ड्रॉ करने के लिए एक उच्च-स्तरीय Objective-C/Swift API प्रदान करता है। आंतरिक रूप से, UIBezierPath CGPathRef का संदर्भ संग्रहीत करता है — एक Core Graphics ऑब्जेक्ट — लेकिन ड्राइंग, ज्यामिति संशोधन और शैली प्रबंधन के लिए सुविधाजनक विधियाँ जोड़ता है।

CGPath के सीधे उपयोग की तुलना में UIBezierPath का मुख्य लाभ अंतर्निहित ड्राइंग विधियाँ हैं। UIBezierPath इंस्टेंस पर fill() या stroke() को कॉल करना स्वचालित रूप से संदर्भ को कॉन्फ़िगर करता है और पथ को ड्रॉ करता है। वर्ग lineWidth, lineCapStyle, lineJoinStyle, miterLimit और flatness गुणों का भी समर्थन करता है, जो शैलियों को संग्रहीत करने के लिए अलग ऑब्जेक्ट के बिना उपस्थिति को नियंत्रित करने की अनुमति देता है।

UIBezierPath का उपयोग अधिकांश iOS अनुप्रयोगों में UIView के अंदर कस्टम ड्राइंग के लिए किया जाता है: सरल आइकन से लेकर जटिल एनिमेटेड चार्ट तक। UIView वर्ग की draw(_:) विधि वह प्रमुख स्थान है जहाँ डेवलपर UIBezierPath बनाते और ड्रॉ करते हैं। वर्ग Core Animation के साथ पूरी तरह से संगत है और CAShapeLayer और CABasicAnimation के माध्यम से पथ एनिमेशन के लिए उपयोग किया जा सकता है।

सीधी रेखाएँ और आयत

move(to:) विधि बिना ड्रॉ किए पथ के प्रारंभ बिंदु को निर्दिष्ट निर्देशांकों पर ले जाती है। किसी भी खंड के निर्माण से पहले यह एक अनिवार्य कॉल है। addLine(to:) वर्तमान स्थिति से निर्दिष्ट बिंदु तक एक सीधा खंड जोड़ता है। close() विधि अंतिम बिंदु से अंतिम move(to:) के पहले बिंदु तक एक रेखा खींचकर समोच्च को बंद करती है।

गोल कोनों वाले आयत

UIBezierPath तैयार आकृतियों के लिए कई सुविधाजनक इनिशियलाइज़र प्रदान करता है। init(rect:) एक आयत बनाता है, init(roundedRect:cornerRadius:) गोल कोनों वाला आयत बनाता है। UIRectCorner पैरामीटर केवल चयनित कोनों को गोल करने की अनुमति देता है, जैसे topLeft और bottomRight, बाकी को सीधा छोड़कर। इसका व्यापक रूप से कस्टम बटन और कार्ड बनाने के लिए उपयोग किया जाता है।

init(ovalIn:) निर्दिष्ट आयत में अंकित एक दीर्घवृत्त बनाता है। यदि आयत एक वर्ग है, तो दीर्घवृत्त एक वृत्त बन जाता है। init(roundedRect:byRoundingCorners:cornerRadii:) सबसे लचीला विकल्प है, जो प्रत्येक कोने के लिए अलग-अलग त्रिज्या निर्धारित करने की अनुमति देता है। यह इनिशियलाइज़र iOS 6 में पेश किया गया था और गोल कंटेनर बनाने का मानक बना हुआ है।

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

बेज़ियर वक्र: द्विघात और घन

addQuadCurve(to:controlPoint:) एक नियंत्रण बिंदु के साथ एक द्विघात बेज़ियर वक्र जोड़ता है। इस प्रकार के वक्र का उपयोग सरल चिकने मोड़ों के लिए किया जाता है जब गणना को कम करना आवश्यक होता है। एक द्विघात वक्र हमेशा एक परवलय होता है और प्रारंभ, नियंत्रण और अंत बिंदुओं द्वारा गठित त्रिभुज के भीतर होने की गारंटी होती है।

घन बेज़ियर वक्र

addCurve(to:controlPoint1:controlPoint2:) दो नियंत्रण बिंदुओं के साथ एक घन बेज़ियर वक्र जोड़ता है। घन वक्रों का उपयोग सभी आधुनिक वेक्टर संपादकों और TrueType फ़ॉन्ट में किया जाता है। दो नियंत्रण बिंदु सटीक आकार नियंत्रण के लिए अधिक स्वतंत्रता प्रदान करते हैं। यह विधि जैविक और जटिल आकृतियों के निर्माण के लिए अनुशंसित है।

वक्र बनाते समय, निरंतरता सिद्धांत बनाए रखना महत्वपूर्ण है — खंडों के कनेक्शन बिंदु पर चिकनाई। C1 निरंतरता (स्पर्शरेखा) के लिए, अगले वक्र का नियंत्रण बिंदु पिछले वक्र के नियंत्रण बिंदु के समान रेखा पर होना चाहिए। C2 निरंतरता (वक्रता) के लिए, अधिक जटिल समन्वय की आवश्यकता होती है, जो समान संख्या में नियंत्रण बिंदुओं वाले दो UIBezierPath के बीच एनिमेट करते समय CAShapeLayer में स्वचालित रूप से प्रदान किया जाता है।

चाप और वृत्त

addArc(withCenter:radius:startAngle:endAngle:clockwise:) निर्दिष्ट पैरामीटर के साथ एक वृत्तीय चाप जोड़ता है। कोण वृत्त के केंद्र के सापेक्ष रेडियन में निर्दिष्ट किए जाते हैं। शून्य कोण दाईं ओर की दिशा (घड़ी के मुख पर 3 बजे) से मेल खाता है। clockwise पैरामीटर दिशा निर्धारित करता है: true दक्षिणावर्त, false वामावर्त। चाप पाई चार्ट, स्पीडोमीटर और इंटरैक्टिव प्रोग्रेस रिंग के लिए अपरिहार्य हैं।

वृत्त और सेक्टर

पूर्ण वृत्त के लिए, startAngle = 0 और endAngle = .pi * 2 का उपयोग करें। सेक्टर बनाने के लिए (पाई चार्ट के भाग के रूप में), केंद्र में addLine(to:) और close() के साथ addArc का उपयोग करें। UIBezierPath में कोई अंतर्निहित addCircle विधि नहीं है — एक वृत्त वर्गाकार आयत के साथ init(ovalIn:) के माध्यम से या पूर्ण कोण के साथ addArc के माध्यम से बनाया जाता है।

addArc(withCenter:radius:startAngle:endAngle:clockwise:) विधि स्वचालित रूप से चाप के प्रारंभ बिंदु पर move(to:) करती है यदि वर्तमान स्थिति उससे मेल नहीं खाती। यदि वर्तमान स्थिति भिन्न है, तो उसके और चाप की शुरुआत के बीच एक सीधी रेखा खींची जाती है। यह व्यवहार Core Graphics से भिन्न है, जहाँ प्रत्येक नए समोच्च से पहले एक स्पष्ट move(to:) की आवश्यकता होती है।

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

पथ का भरण और स्ट्रोक

fill() पथ के आंतरिक क्षेत्र को वर्तमान fillColor या setFill के माध्यम से ग्राफ़िकल संदर्भ में सेट रंग से भरता है। स्व-प्रतिच्छेदन पथों के लिए, भरण नियम usesEvenOddFillRule गुण द्वारा निर्धारित किया जाता है। यदि यह true है, तो even-odd नियम का उपयोग किया जाता है: एक बिंदु को आकृति के अंदर माना जाता है यदि उससे एक किरण समोच्च को विषम संख्या में पार करती है।

स्ट्रोक सेटिंग्स

stroke() वर्तमान lineWidth, lineCapStyle और lineJoinStyle सेटिंग्स के साथ पथ समोच्च खींचता है। lineCapStyle खुले खंडों के सिरों का आकार निर्धारित करता है: .butt (सीधा कट), .round (अर्धवृत्ताकार), .square (प्रक्षेपण के साथ वर्गाकार)। lineJoinStyle जोड़ कोनों का आकार निर्धारित करता है: .miter (तीक्ष्ण), .round (गोल), .bevel (कटा हुआ)।

धराशायी रेखाओं के लिए setLineDash(_:count:phase:) गुण का उपयोग किया जाता है। यह वैकल्पिक डैश और अंतराल लंबाई, तत्वों की संख्या और प्रारंभिक चरण की एक सरणी स्वीकार करता है। डैश रेंडरिंग पथ रैस्टराइज़ेशन के दौरान की जाती है — जटिल पैटर्न समोच्च की ज्यामितीय जटिलता को नहीं बढ़ाते हैं। CAShapeLayer शुरू से अंत तक “ड्राइंग” प्रभाव के लिए strokeEnd गुण के एनिमेशन का समर्थन करता है।

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

जटिल आकृति बनाने का उदाहरण

आइए UIBezierPath का उपयोग करके एक रिंग के रूप में एक कस्टम प्रोग्रेस इंडिकेटर बनाएँ। रिंग का निर्माण अलग-अलग स्ट्रोक रंगों के साथ समान त्रिज्या के दो चापों से होता है। पहला चाप ग्रे रंग में एक पूर्ण वृत्त है (पृष्ठभूमि), दूसरा प्रगति दिखाने वाला एक खंड है। एनिमेशन के लिए CAShapeLayer और 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
    }
}

इस उदाहरण में, UIBezierPath का उपयोग एक वृत्ताकार समोच्च बनाने के लिए किया जाता है, जिसे बाद में cgPath गुण के माध्यम से CAShapeLayer को पास किया जाता है। strokeEnd को 0 से 1 तक एनिमेट करना रिंग भरने को दर्शाता है। यह दृष्टिकोण लोडिंग इंडिकेटर, फ़िटनेस ट्रैकर और प्रोग्रेस विजेट में उपयोग किया जाता है। layoutSubviews विधि View के आकार बदलने पर पथ के पुनर्निर्माण की गारंटी देती है।

lineCap = .round चाप में गोल सिरे जोड़ता है, जिससे इंडिकेटर को अधिक साफ-सुथरा रूप मिलता है। strokeEnd गुण CAShapeLayer का एक एनिमेटेबल गुण है जिसे प्रत्येक फ्रेम में पूरे समोच्च को फिर से ड्रॉ करने की आवश्यकता नहीं होती है। एनिमेशन Core Animation के माध्यम से पूरी तरह से GPU पर चलता है, जो CPU पर कोई लोड डाले बिना 60 FPS सुनिश्चित करता है।