CGGradient: यह क्या है, ग्रेडिएंट के प्रकार और उनका निर्माण

CGGradient क्या है?

CGGradient Core Graphics में एक अपरिवर्तनीय (इम्यूटेबल) ऑब्जेक्ट है जो ग्रेडिएंट संक्रमण के साथ रंगों के एक सेट और उन्हें मिश्रित करने के नियमों को समाहित करता है। आंतरिक रूप से, CGGradient CGColor की एक सरणी, [0.0, 1.0] रेंज में स्थानों (locations) की एक सरणी और CGColorSpace का एक संदर्भ संग्रहीत करता है जिसमें रंगों की व्याख्या की जाती है। प्रत्येक रंग ग्रेडिएंट स्केल पर एक स्थान से जुड़ा होता है: स्थान 0.0 प्रारंभ से, 1.0 संक्रमण के अंत से मेल खाता है।

CGGradientCreateWithColors फ़ंक्शन के माध्यम से CGGradient बनाते समय, Core Graphics मध्यवर्ती रंग मानों की पूर्व-गणना करता है। एक ग्रेडिएंट में मनमानी संख्या में कलर स्टॉप हो सकते हैं, जो जटिल बहु-रंग संक्रमण की अनुमति देते हैं। रंगों की संख्या कम से कम दो होनी चाहिए, और प्रत्येक रंग locations सरणी में एक स्थान के अनुरूप होना चाहिए।

CGGradient की संरचना Core Animation से CAGradientLayer जैसे उच्च-स्तरीय API से भिन्न है क्योंकि यह सीधे Core Graphics कॉन्टेक्स्ट में काम करता है। यह ड्राइंग प्रक्रिया पर पूर्ण नियंत्रण और ग्रेडिएंट को अन्य Quartz 2D संक्रियाओं — क्लिपिंग मास्क, छाया और रूपांतरण के साथ संयोजित करने की क्षमता प्रदान करता है।

लीनियर और रेडियल ग्रेडिएंट

Core Graphics दो प्रकार के ग्रेडिएंट का समर्थन करता है: लीनियर (अक्षीय) और रेडियल। लीनियर ग्रेडिएंट CGGradientCreateWithColors फ़ंक्शन के साथ बनाया जाता है और CGContextDrawLinearGradient के माध्यम से खींचा जाता है। रेडियल ग्रेडिएंट को उसी CGGradient संरचना की आवश्यकता होती है लेकिन इसे CGContextDrawRadialGradient के माध्यम से खींचा जाता है।

लीनियर ग्रेडिएंट (अक्षीय)

लीनियर ग्रेडिएंट प्रारंभ बिंदु startPoint से अंत बिंदु endPoint तक एक सीधी रेखा के साथ रंग संक्रमण को फैलाता है। रंगों को इन दो बिंदुओं के बीच प्रक्षेपित (इंटरपोलेट) किया जाता है, और उनके बाहर का व्यवहार विस्तार विकल्पों द्वारा नियंत्रित किया जाता है। लीनियर ग्रेडिएंट चिकनी पृष्ठभूमि बनाने, धातु की सतहों का अनुकरण करने और इंटरफ़ेस तत्वों में रंग संक्रमण के लिए आदर्श है।

रेडियल ग्रेडिएंट

रेडियल ग्रेडिएंट एक वृत्त से दूसरे वृत्त तक रंग संक्रमण बनाता है। प्रत्येक वृत्त एक केंद्र (startCenter / endCenter) और एक त्रिज्या (startRadius / endRadius) द्वारा परिभाषित होता है। रंग आंतरिक वृत्त से बाहरी वृत्त की ओर प्रक्षेपित होता है। एक विशेष मामला तब होता है जब प्रारंभिक त्रिज्या 0 होती है: ग्रेडिएंट एक बिंदु से फैलता है। रेडियल ग्रेडिएंट का उपयोग प्रकाश स्रोतों, लेंसों, आकाशीय पिंडों और स्पॉटलाइट प्रभावों के अनुकरण के लिए किया जाता है।

CGGradient बनाना: रंग और स्थान

CGGradient केवल एक मूल फ़ंक्शन — CGGradientCreateWithColors के साथ बनाया जाता है। फ़ंक्शन CGColorSpace, CGColor (CFArray) की एक सरणी और CGFloat locations की एक सरणी लेता है। यदि locations NULL है, तो रंग ग्रेडिएंट स्केल के साथ समान रूप से वितरित किए जाते हैं। यदि locations निर्दिष्ट हैं, तो उनकी संख्या रंगों की संख्या से मेल खानी चाहिए।

locations सरणी में 0.0 से 1.0 तक के मान होते हैं जो प्रत्येक रंग के लिए स्टॉप बिंदु परिभाषित करते हैं। मान नीरस रूप से बढ़ने चाहिए। यदि पहला मान 0.0 से अधिक है, तो प्रारंभ से इस स्थान तक का रंग स्थान 0.0 पर मौजूद रंग से बाह्य-प्रक्षेपित (एक्सट्रपोलेट) होता है। इसी प्रकार अंतिम मान 1.0 से कम होने पर। यह व्यवहार ड्राइंग के दौरान विस्तार विकल्पों द्वारा नियंत्रित किया जाता है।

ग्रेडिएंट के लिए रंग चुनते समय, कलर स्पेस पर विचार करना महत्वपूर्ण है। एक ही CGGradient में सभी रंग एक ही CGColorSpace के होने चाहिए — Core Graphics उस स्पेस में घटकों का प्रक्षेप करता है। यदि रंग अलग-अलग स्पेस में बनाए गए हैं, तो उन्हें पहले CGColorCreateCopyByMatchingToColorSpace के माध्यम से एक सामान्य स्पेस में परिवर्तित किया जाना चाहिए।

कॉन्टेक्स्ट में ग्रेडिएंट बनाना

Core Graphics ग्रेडिएंट बनाने के लिए दो फ़ंक्शन प्रदान करता है: लीनियर के लिए CGContextDrawLinearGradient और रेडियल के लिए CGContextDrawRadialGradient। दोनों फ़ंक्शन एक ग्राफ़िक्स कॉन्टेक्स्ट, एक CGGradient ऑब्जेक्ट, विस्तार विकल्प और प्रकार-विशिष्ट ज्यामितीय पैरामीटर लेते हैं। ड्राइंग वर्तमान क्लिपिंग मास्क और कॉन्टेक्स्ट ट्रांसफ़ॉर्मेशन को ध्यान में रखकर की जाती है।

विस्तार विकल्प (ग्रेडिएंट विकल्प)

विस्तार विकल्प 0.0–1.0 स्थान रेंज से परे ग्रेडिएंट के व्यवहार को नियंत्रित करते हैं। स्थिरांक kCGGradientDrawsBeforeStartLocation प्रारंभिक स्थान से पहले के क्षेत्र को पहले स्टॉप के रंग से भरता है। kCGGradientDrawsAfterEndLocation अंतिम स्टॉप के रंग से भरता है। इन विकल्पों को बिटमास्क के माध्यम से संयोजित किया जा सकता है। रेडियल ग्रेडिएंट के लिए, विकल्प प्रारंभिक और अंतिम त्रिज्या से परे के क्षेत्र पर लागू होते हैं।

रूपांतरण का प्रभाव

ग्रेडिएंट खींचा जाता है वर्तमान ग्राफ़िक्स कॉन्टेक्स्ट के समन्वय प्रणाली में, इसके रूपांतरण (CTM — करंट ट्रांसफ़ॉर्मेशन मैट्रिक्स) को ध्यान में रखते हुए। ड्राइंग फ़ंक्शन को कॉल करने से पहले CGContextTranslateCTM, CGContextScaleCTM या CGContextRotateCTM लागू करने से ग्रेडिएंट की स्थिति और पैमाना बदल जाता है। यह नए ऑब्जेक्ट बनाए बिना विभिन्न क्षेत्रों के लिए एक ही CGGradient के पुन: उपयोग की अनुमति देता है।

विकल्प: विस्तार, स्मूथिंग और मास्किंग

Core Graphics ग्रेडिएंट को नियंत्रित करने के लिए कई अतिरिक्त तंत्र प्रदान करता है: एंटीअलियासिंग, क्लिपिंग मास्क के माध्यम से मास्किंग और पारदर्शिता प्रभावों के साथ संयोजन। एंटीअलियासिंग ग्राफ़िक्स कॉन्टेक्स्ट में डिफ़ॉल्ट रूप से सक्षम है और CGContextSetShouldAntialias के माध्यम से नियंत्रित किया जाता है।

क्लिपिंग मास्क ग्रेडिएंट ड्राइंग क्षेत्र को एक मनमाने आकार तक सीमित करने की अनुमति देता है। CGContextDrawLinearGradient को कॉल करने से पहले, CGContextBeginPath, CGContextAddPath और CGContextClip के माध्यम से एक पथ परिभाषित करना आवश्यक है। ग्रेडिएंट केवल इस पथ से घिरे क्षेत्र के अंदर खींचा जाता है। इसका व्यापक रूप से ग्रेडिएंट आइकन, बटन और प्रगति पट्टियाँ बनाने के लिए उपयोग किया जाता है।

ग्रेडिएंट विस्तार एक और महत्वपूर्ण पैरामीटर है। kCGGradientDrawsBeforeStartLocation का उपयोग करते समय, Core Graphics startPoint से पहले पूरे क्षेत्र पर पहले स्टॉप के रंग का बाह्य-प्रक्षेप करता है। इस विकल्प के बिना, ग्रेडिएंट के बाहर का क्षेत्र खाली (पारदर्शी) रहता है। दोनों विकल्पों का संयोजन सुनिश्चित करता है कि ग्राफ़िक्स कॉन्टेक्स्ट का पूरा आयत ग्रेडिएंट से भरा हो, भले ही startPoint और endPoint इसके अंदर हों।

Swift कोड उदाहरण

आइए CGGradient और Core Graphics का उपयोग करके iOS में ग्रेडिएंट बनाने और खींचने के व्यावहारिक उदाहरण देखें।

तीन रंगों के साथ लीनियर ग्रेडिएंट

यह उदाहरण तीन रंगों (नीला, हरा, लाल) के साथ एक लीनियर ग्रेडिएंट बनाता है और इसे एक UIView के विकर्ण पर खींचता है। locations सरणी रंगों को असमान रूप से वितरित करती है: नीला 0.0 से 0.3 तक, हरा 0.6 पर, लाल 0.6 से 1.0 तक।

func drawLinearGradient(in ctx: CGContext,
                          rect: CGRect) {
    let colors = [
        UIColor.blue.cgColor,
        UIColor.green.cgColor,
        UIColor.red.cgColor
    ] as CFArray

    let locations: [CGFloat] = [0.0, 0.6, 1.0]
    let space = CGColorSpaceCreateDeviceRGB()

    guard let gradient = CGGradientCreateWithColors(
        space, colors, locations
    ) else { return }

    let start = CGPoint(x: 0, y: 0)
    let end = CGPoint(x: rect.width,
                         y: rect.height)

    ctx.drawLinearGradient(gradient,
        start: start, end: end,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

चमक प्रभाव के साथ रेडियल ग्रेडिएंट

यह उदाहरण एक रेडियल ग्रेडिएंट खींचता है जो चमक प्रभाव का अनुकरण करता है। शून्य त्रिज्या वाला प्रारंभ बिंदु चमक के केंद्र को परिभाषित करता है, और बाहरी वृत्त फ़ेड सीमा को परिभाषित करता है। इस प्रभाव का उपयोग इंटरफ़ेस तत्वों या गतिविधि संकेतकों को हाइलाइट करने के लिए किया जाता है।

func drawRadialGlow(in ctx: CGContext,
                     center: CGPoint) {
    let colors = [
        UIColor.white.cgColor,
        UIColor.orange.cgColor,
        UIColor.clear.cgColor
    ] as CFArray
    let locations: [CGFloat] = [0.0, 0.4, 1.0]

    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(), colors, locations)

    ctx.drawRadialGradient(gradient,
        startCenter: center, startRadius: 0,
        endCenter: center, endRadius: 100,
        options: [.drawsBeforeStartLocation,
                  .drawsAfterEndLocation])
}

क्लिपिंग मास्क के साथ ग्रेडिएंट

इस उदाहरण में, ग्रेडिएंट एक क्लिपिंग पथ के माध्यम से एक गोलाकार क्षेत्र तक सीमित है। ग्रेडिएंट खींचने से पहले, एक गोलाकार पथ परिभाषित किया जाता है जो वर्तमान कॉन्टेक्स्ट मास्क बन जाता है। ग्रेडिएंट केवल वृत्त के अंदर के क्षेत्र को भरता है, जिससे ग्रेडिएंट आइकन प्रभाव बनता है।

func drawGradientInCircle(in ctx: CGContext,
                          rect: CGRect) {
    // Creating circular clip path
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // Drawing gradient inside clip mask
    let colors = [UIColor.magenta.cgColor,
                    UIColor.cyan.cgColor]
    let gradient = CGGradientCreateWithColors(
        CGColorSpaceCreateDeviceRGB(),
        colors as CFArray, nil)

    ctx.drawLinearGradient(gradient,
        start: CGPoint(x: 0, y: 0),
        end: CGPoint(x: rect.width,
                     y: rect.height),
        options: [.drawsBeforeStartLocation])
}