iOS میں CGContext — یہ کیا ہے، طریقے اور ڈرائنگ کانٹیکسٹ کو کیسے منظم کریں

CGContext کیا ہے؟

CGContext Core Graphics فریم ورک سے ایک اوپک قسم (opaque type) ہے جو 2D رینڈرنگ کمانڈز پر عمل درآمد کے لیے ماحول کی نمائندگی کرتا ہے۔ یہ اسٹیٹ اسٹیک، موجودہ رنگ کی جگہ، کوآرڈینیٹ تبدیلی اور کلپنگ ایریا کو منظم کرتا ہے۔ CGContext واحد آبجیکٹ ہے جس کے ساتھ تمام Quartz 2D ڈرائنگ فنکشنز تعامل کرتے ہیں — کوئی بھی گرافیکل آپریشن اس سے گزرتا ہے۔

CGContext اپنے مقصد کے لحاظ سے کئی اقسام میں موجود ہے: bitmap context میموری میں راسٹر امیجز کے ساتھ کام کرنے کے لیے، PDF context PDF دستاویزات بنانے کے لیے، window context اسکرین پر ڈرائنگ کے لیے (UIView کی طرف سے draw(_:) میں فراہم کردہ)۔ iOS ڈویلپرز اکثر draw(_:) طریقہ کے اندر UIGraphicsGetCurrentContext() سے یا آف لائن رینڈرنگ کے لیے UIGraphicsBeginImageContextWithOptions سے حاصل کردہ کانٹیکسٹ کے ساتھ کام کرتے ہیں۔

کانٹیکسٹ تمام سیٹنگز کو اسٹیٹ اسٹیک کے ذریعے لاگو کرتا ہے — ڈویلپر موجودہ حالت کو محفوظ کر سکتا ہے (saveGState)، پیرامیٹرز تبدیل کر سکتا ہے اور پچھلی حالت کو بحال کر سکتا ہے (restoreGState)۔ یہ پیچیدہ مناظر بناتے وقت انتہائی اہم ہے جہاں مختلف عناصر کو مختلف رنگوں، لائن موٹائیوں اور تبدیلیوں کی ضرورت ہوتی ہے۔ Apple WWDC 2023 کے مطابق، اسٹیٹ اسٹیک کا صحیح استعمال کوڈ پڑھنے کی اہلیت کو بہتر بناتا ہے اور بصری نمونوں کو روکتا ہے۔

اسٹیٹ مینجمنٹ: saveGState اور restoreGState

CGContextSaveGState موجودہ کانٹیکسٹ اسٹیٹ کی ایک کاپی اسٹیک پر رکھتا ہے۔ اس اسٹیٹ میں تمام سیٹنگز شامل ہیں: رنگ، لائن موٹائی، تبدیلی، سائے، کلپنگ ایریا، فونٹس۔ پیرامیٹرز تبدیل کرنے کے بعد، CGContextRestoreGState کو کال کرنے سے کانٹیکسٹ محفوظ شدہ حالت میں واپس آ جاتا ہے، تمام درمیانی تبدیلیاں کالعدم ہو جاتی ہیں۔ اسٹیک iOS پر 32 اسٹیٹس تک رکھ سکتا ہے۔

اسٹیک کا عملی استعمال

مختلف اسٹائل والے عناصر کے گروپ بناتے وقت (مثلاً کثیر الرنگی چارٹ سیکٹر)، اسٹیٹ اسٹیک ہر پیرامیٹر کو دستی طور پر یاد رکھنے اور بحال کرنے کی ضرورت کو ختم کرتا ہے۔ saveGState/restoreGState کے بغیر، ڈویلپر کو ہر عنصر کے بعد رنگ، سایہ اور تبدیلی کو دوبارہ سیٹ کرنا پڑتا۔ اسٹیک کا استعمال کوڈ کو کم کرتا ہے اور بحالی کی غلطیوں کو روکتا ہے۔

محفوظ کرنے اور بحال کرنے کا توازن برقرار رکھنا ضروری ہے — ہر saveGState کا ایک مماثل restoreGState ہونا چاہیے۔ توازن توڑنے سے اسٹیٹ لیک یا قبل از وقت بحالی ہوتی ہے، جو غیر متوقع رینڈرنگ کا سبب بنتی ہے۔ Xcode کا جامد تجزیہ کار CGContext اسٹیک توازن کو نہیں جانچتا، لہٰذا درستگی ڈویلپر کی ذمہ داری ہے۔ do/finally بلاکس میں جوڑوں کو گروپ کرنے کی سفارش کی جاتی ہے۔

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }

    ctx.saveGState()
    ctx.setStrokeColor(UIColor.red.cgColor)
    ctx.setLineWidth(3)
    ctx.addRect(CGRect(x: 50, y: 50, width: 200, height: 100))
    ctx.strokePath()
    ctx.restoreGState()
}

رنگ اور بھرائی

CGContextSetFillColorWithColor بعد کے آپریشنز کے لیے بھرائی کا رنگ سیٹ کرتا ہے۔ رنگ CGColorRef کے طور پر پاس کیا جاتا ہے، جس میں رنگ کی جگہ اور رنگ کے اجزاء کے بارے میں معلومات ہوتی ہیں۔ CGContextSetStrokeColorWithColor اسٹروک رنگ کے لیے اسی طرح کام کرتا ہے۔ Apple بار بار استعمال ہونے والی CGColorRef اقدار کو کیش کرنے کی سفارش کرتا ہے تاکہ کارکردگی بہتر ہو۔

CGContext میں گریڈینٹ

CGContextDrawLinearGradient مخصوص رنگوں کے ساتھ دو پوائنٹس کے درمیان لکیری گریڈینٹ بناتا ہے۔ CGContextDrawRadialGradient ایک دائرے سے دوسرے دائرے میں منتقل ہونے والا ریڈیل گریڈینٹ بناتا ہے۔ گریڈینٹ کے ساتھ کام کرنے کے لیے، پہلے CGGradientRef آبجیکٹ بنایا جاتا ہے جس میں رنگوں کی ایک صف اور سٹاپ پوزیشنز ہوتی ہیں۔ CGContext میں گریڈینٹ RGB اور Grayscale دونوں رنگوں کی جگہوں کو سپورٹ کرتے ہیں۔

گریڈینٹ کے ساتھ کسی علاقے کو بھرنے کے لیے پہلے کلپنگ ایریا سیٹ کرنا ضروری ہے۔ clip کے بغیر، گریڈینٹ صرف مطلوبہ شکل نہیں بلکہ پورے کانٹیکسٹ کو بھر دے گا۔ عام نمونہ: کانٹیکسٹ میں پاتھ شامل کریں، علاقہ محدود کرنے کے لیے clip کال کریں، پھر گریڈینٹ بنائیں۔ یہ نمونہ تمام ایپلیکیشنز میں استعمال ہوتا ہے جہاں پیچیدہ شکلوں کی گریڈینٹ بھرائی کی ضرورت ہوتی ہے، بٹنوں سے لے کر پس منظر تک۔

پاتھ اور لائنیں بنانا

CGContextAddPath بعد کی رینڈرنگ کے لیے پہلے سے بنائے گئے CGPathRef کو کانٹیکسٹ میں شامل کرتا ہے۔ پاتھ شامل کرنے کے بعد، اسے اسٹروک (strokePath)، بھرا (fillPath) یا دونوں کیا جا سکتا ہے۔ CGContextBeginPath پچھلے پاتھ کو صاف کرتے ہوئے نیا پاتھ شروع کرتا ہے۔ کانٹیکسٹ ایک وقت میں صرف ایک فعال پاتھ کو سپورٹ کرتا ہے۔

پوائنٹس کے ذریعے سیدھی لکیریں اور منحنی

CGContextMoveToPoint موجودہ شکل کے پوائنٹ کو مخصوص کوآرڈینیٹ میں منتقل کرتا ہے۔ CGContextAddLineToPoint موجودہ پوائنٹ سے دیے گئے پوائنٹ تک سیدھی لکیر کھینچتا ہے۔ CGContextAddCurveToPoint کیوبک بیزیئر منحنی شامل کرتا ہے، CGContextAddQuadCurveToPoint کواڈریٹک منحنی شامل کرتا ہے۔ CGContextClosePath آخری اور پہلے پوائنٹ کے درمیان سیدھی لکیر سے شکل بند کرتا ہے۔

UIBezierPath کے برعکس، جہاں یہ تمام طریقے پاتھ آبجیکٹ پر کال کیے جاتے ہیں، CGContext میں یہ براہ راست کانٹیکسٹ پر کال کیے جاتے ہیں۔ یہ فرق طریقہ کار چنتے وقت اہم ہے: UIBezierPath پاتھوں کو دوبارہ استعمال کرنے کے لیے زیادہ آسان ہے، CGContext کم سے کم اوور ہیڈ کے ساتھ ایک بار کی ڈرائنگ کے لیے بہتر ہے۔ CGContext CGContextSetLineDash کے ذریعے ڈیشڈ لائنوں، CGContextSetLineCap کے ذریعے لچکدار سروں اور CGContextSetLineJoin کے ذریعے جوڑوں کو بھی سپورٹ کرتا ہے۔

let ctx = UIGraphicsGetCurrentContext()!
ctx.beginPath()
ctx.moveTo(x: 50, y: 100)
ctx.addLineTo(x: 200, y: 100)
ctx.addCurveTo(x1: 250, y1: 50, x2: 300, y2: 150, x3: 350, y3: 100)
ctx.setStrokeColor(UIColor.blue.cgColor)
ctx.setLineWidth(5)
ctx.strokePath()

کلپنگ ایریا اور تبدیلیاں

CGContextClip ڈرائنگ کے علاقے کو موجودہ پاتھ تک محدود کرتا ہے۔ بعد کی تمام ڈرائنگ آپریشنز صرف اس علاقے کے اندر نظر آئیں گے۔ یہ ماسکنگ، کونوں کو گول کرنے اور عناصر کی کسٹم حدود بنانے کا بنیادی طریقہ کار ہے۔ کلپنگ ایریا saveGState/restoreGState کے ذریعے بھی محفوظ اور بحال کیا جاتا ہے۔

کوآرڈینیٹ تبدیلیاں

CGContextTranslateCTM کانٹیکسٹ کوآرڈینیٹ سسٹم کی اصل کو منتقل کرتا ہے۔ CGContextScaleCTM X اور Y محوروں کو پیمانہ کرتا ہے۔ CGContextRotateCTM کوآرڈینیٹ سسٹم کو موجودہ اصل کے گرد گھماتا ہے۔ تبدیلیاں جمع ہوتی ہیں — ہر بعد والی موجودہ کوآرڈینیٹ سسٹم کے نسبت لاگو ہوتی ہے۔ مرکب تبدیلیاں (منتقلی + گردش + پیمانہ) اینیمیشن اور عناصر کی پوزیشننگ کے لیے استعمال ہوتی ہیں۔

کلپنگ اور تبدیلیوں کا مشترکہ استعمال طاقتور صلاحیتیں فراہم کرتا ہے: کلپنگ کے ذریعے ایک پیچیدہ ماسک بنایا جا سکتا ہے، پھر پورے مواد پر تبدیلی لاگو کی جا سکتی ہے۔ ایک عام مثال — گول کونوں کے ساتھ زاویے پر تصویر کا حصہ دکھانا۔ آپریشنز کی ترتیب اہم ہے: پہلے کلپنگ ایریا سیٹ کریں، پھر تبدیلی لاگو کریں، پھر مواد بنائیں۔ Apple ڈرائنگ لوپ میں CTM (موجودہ تبدیلی میٹرکس) تبدیلیوں کو کم سے کم کرنے کی سفارش کرتا ہے۔

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }
    ctx.saveGState()

    // clipping region - circle
    ctx.addEllipse(in: CGRect(x: 50, y: 50, width: 200, height: 200))
    ctx.clip()

    // content transformation
    ctx.translateBy(x: 150, y: 150)
    ctx.rotate(by: .pi / 4)
    ctx.translateBy(x: -150, y: -150)

    UIImage(named: "photo")?.draw(at: CGPoint(x: 50, y: 50))
    ctx.restoreGState()
}

CGContext میں ڈرائنگ کی مثال

CGContext استعمال کرتے ہوئے گریڈینٹ چارٹ بنانے کی مکمل مثال دیکھتے ہیں۔ چارٹ میں شامل ہیں گریڈینٹ بھرائی اور ٹیکسٹ لیبل کے ساتھ تین مختلف رنگوں کے سیکٹر۔ کوڈ ایک ہی کانٹیکسٹ میں saveGState، clip، گریڈینٹ اور ٹیکسٹ رینڈرنگ کا امتزاج دکھاتا ہے۔

class PieChartView: UIView {

    private struct Slice {
        let color: UIColor
        let value: CGFloat
        let label: String
    }

    override func draw(_ rect: CGRect) {
        guard let ctx = UIGraphicsGetCurrentContext() else { return }

        let slices = [
            Slice(color: .systemRed, value: 0.4, label: "iOS"),
            Slice(color: .systemGreen, value: 0.35, label: "Android"),
            Slice(color: .systemBlue, value: 0.25, label: "Other")
        ]

        let center = CGPoint(x: bounds.midX, y: bounds.midY)
        let radius = bounds.width * 0.35
        var startAngle: CGFloat = -.pi / 2

        for slice in slices {
            let endAngle = startAngle + .pi * 2 * slice.value

            ctx.saveGState()
            ctx.moveTo(x: center.x, y: center.y)
            ctx.addArc(center: center, radius: radius,
                       startAngle: startAngle, endAngle: endAngle, clockwise: false)
            ctx.closePath()
            ctx.setFillColor(slice.color.cgColor)
            ctx.fillPath()

            // text label
            let midAngle = startAngle + endAngle / 2
            let labelPos = CGPoint(
                x: center.x + radius * 0.7 * cos(midAngle),
                y: center.y + radius * 0.7 * sin(midAngle)
            )
            slice.label.draw(at: labelPos, withAttributes: [
                .foregroundColor: UIColor.white,
                .font: UIFont.boldSystemFont(ofSize: 14)
            ])
            ctx.restoreGState()
            startAngle = endAngle
        }
    }
}

اس مثال میں، چارٹ کا ہر سیکٹر اپنے saveGState/restoreGState بلاک میں بنایا گیا ہے۔ یہ طریقہ ضمانت دیتا ہے کہ ایک سیکٹر کے رنگ اور پاتھ کی سیٹنگز دوسروں پر اثر نہیں ڈالتیں۔ addArc طریقہ شروع سے آخر تک ایک قوس بناتا ہے، اور closePath سیکٹر کو مرکز کی طرف بند کرتا ہے۔ لیبل ٹیکسٹ پوزیشن کے حساب کے لیے مثلثیاتی فنکشنز cos اور sin کا استعمال کرتے ہوئے سیکٹر کے درمیانی زاویے پر رکھا جاتا ہے۔

بار بار دوبارہ ڈرائنگ کے دوران کارکردگی بہتر بنانے کے لیے، زاویوں اور پوزیشنوں کے حساب کو علیحدہ صف میں کیش کرنے کی سفارش کی جاتی ہے۔ CGContext تمام آپریشنز CPU پر انجام دیتا ہے، لہٰذا درجنوں سیکٹر والے پیچیدہ مناظر میں اصلاح کی ضرورت پڑ سکتی ہے — مثال کے طور پر، CGLayer میں پہلے سے رینڈرنگ یا GPU ایکسلریشن کے لیے Metal کا استعمال۔ 5–10 عناصر والے زیادہ تر UI کاموں کے لیے، CGContext کی کارکردگی قابل قبول رہتی ہے۔