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:) مخصوص مستطیل میں inscribed ایک بیضوی شکل بناتا ہے۔ اگر مستطیل ایک مربع ہے تو بیضوی شکل دائرہ بن جاتی ہے۔ 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 ہے تو، جفت-طاق اصول استعمال ہوتا ہے: ایک نقطہ کو شکل کے اندر سمجھا جاتا ہے اگر اس سے ایک شعاع کنٹور کو طاق تعداد میں کاٹتی ہے۔

اسٹروک سیٹنگز

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 یقینی بناتی ہے۔