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 جیسی اعلیٰ سطحی APIs سے مختلف ہے کیونکہ یہ براہ راست 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 آبجیکٹ، توسیعی اختیارات اور قسم کے مخصوص ہندسی پیرامیٹرز لیتے ہیں۔ ڈرائنگ موجودہ کلپنگ ماسک اور سیاق و سباق کی تبدیلی کو مدنظر رکھ کر کی جاتی ہے۔

توسیعی اختیارات (Gradient Options)

توسیعی اختیارات 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])
}