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:) নির্দিষ্ট প্যারামিটার সহ একটি বৃত্তাকার আর্ক যোগ করে। কোণগুলি বৃত্তের কেন্দ্রের সাপেক্ষে রেডিয়ানে নির্দিষ্ট করা হয়। শূন্য কোণ ডানদিকের দিকের (ঘড়ির মুখে ৩টার অবস্থান) সাথে মিলে যায়। 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 নিশ্চিত করে।