CGGradient: এটি কী, গ্রেডিয়েন্টের প্রকার ও তাদের তৈরি

CGGradient কী?

CGGradient Core Graphics-এ একটি অপরিবর্তনীয় (ইমিউটেবল) অবজেক্ট যা গ্রেডিয়েন্ট রূপান্তর বরাবর রঙের একটি সেট এবং সেগুলি মিশ্রিত করার নিয়মগুলিকে অন্তর্ভুক্ত করে। অভ্যন্তরীণভাবে, CGGradient CGColor-এর একটি অ্যারে, [0.0, 1.0] পরিসরে অবস্থানের (locations) একটি অ্যারে এবং CGColorSpace-এর একটি রেফারেন্স সংরক্ষণ করে যেখানে রঙগুলি ব্যাখ্যা করা হয়। প্রতিটি রঙ গ্রেডিয়েন্ট স্কেলে একটি অবস্থানের সাথে যুক্ত: অবস্থান 0.0 শুরুতে, 1.0 রূপান্তরের শেষে correspond করে।

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])
}