CGGradient: چیست، انواع گرادیان‌ها و ایجاد آنها

CGGradient چیست؟

CGGradient — یک شیء تغییرناپذیر در Core Graphics است که مجموعه‌ای از رنگ‌ها و قوانین ترکیب آنها را در امتداد انتقال گرادیانی کپسوله می‌کند. در داخل، CGGradient آرایه‌ای از CGColor، آرایه‌ای از موقعیت‌ها (locations) در محدوده [0.0, 1.0] و ارجاعی به CGColorSpace که رنگ‌ها در آن تفسیر می‌شوند را ذخیره می‌کند. هر رنگ به یک موقعیت در مقیاس گرادیان مرتبط است: موقعیت 0.0 مربوط به شروع و 1.0 به پایان انتقال است.

هنگام ایجاد CGGradient از طریق تابع CGGradientCreateWithColors، Core Graphics پیش‌محاسبه مقادیر میانی رنگ‌ها را انجام می‌دهد. گرادیان می‌تواند تعداد دلخواهی از توقف‌های رنگی (color stops) داشته باشد که امکان ایجاد انتقال‌های پیچیده چندرنگی را فراهم می‌کند. تعداد رنگ‌ها باید حداقل دو باشد و هر رنگ باید موقعیت متناظری در آرایه locations داشته باشد.

معماری CGGradient با APIهای سطح بالاتر مانند CAGradientLayer از Core Animation متفاوت است از این نظر که مستقیماً در بافت گرافیکی Core Graphics کار می‌کند. این کنترل کامل بر فرآیند رسم و امکان ترکیب گرادیان‌ها با سایر عملیات Quartz 2D — ماسک‌های برش، سایه‌ها و تبدیل‌ها — را فراهم می‌کند.

گرادیان‌های خطی و شعاعی

Core Graphics دو نوع گرادیان را پشتیبانی می‌کند: خطی (axial) و شعاعی (radial). گرادیان خطی توسط تابع CGGradientCreateWithColors ایجاد می‌شود و از طریق CGContextDrawLinearGradient رسم می‌شود. گرادیان شعاعی به همان ساختار CGGradient نیاز دارد، اما از طریق CGContextDrawRadialGradient رسم می‌شود.

گرادیان خطی (Axial)

گرادیان خطی انتقال رنگ را در امتداد خط مستقیم از نقطه شروع startPoint تا نقطه پایان endPoint گسترش می‌دهد. رنگ‌ها بین این دو نقطه درونیابی می‌شوند و رفتار خارج از محدوده آنها توسط گزینه‌های گسترش کنترل می‌شود. گرادیان خطی برای ایجاد پس‌زمینه‌های صاف، شبیه‌سازی سطوح فلزی و انتقال رنگ در عناصر رابط ایده‌آل است.

گرادیان شعاعی (Radial)

گرادیان شعاعی انتقال رنگ را از یک دایره به دایره دیگر ایجاد می‌کند. هر دایره توسط مرکز (startCenter / endCenter) و شعاع (startRadius / endRadius) تعریف می‌شود. رنگ از دایره داخلی به دایره خارجی درونیابی می‌شود. حالت خاص — وقتی شعاع شروع برابر 0 است: گرادیان از یک نقطه منتشر می‌شود. گرادیان‌های شعاعی برای شبیه‌سازی منابع نور، لنزها، اجرام آسمانی و افکت‌های spotlight استفاده می‌شوند.

ایجاد 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، گزینه‌های گسترش و پارامترهای هندسی مختص نوع را دریافت می‌کنند. رسم با در نظر گرفتن ماسک برش جاری (clip) و تبدیل بافت انجام می‌شود.

گزینه‌های گسترش (Gradient Options)

گزینه‌های گسترش رفتار گرادیان را خارج از محدوده موقعیت‌های 0.0–1.0 کنترل می‌کنند. ثابت kCGGradientDrawsBeforeStartLocation ناحیه قبل از موقعیت شروع را با رنگ اولین توقف پر می‌کند. kCGGradientDrawsAfterEndLocation — با رنگ آخرین توقف. این گزینه‌ها را می‌توان از طریق ماسک بیتی ترکیب کرد. برای گرادیان شعاعی، گزینه‌ها به ناحیه خارج از شعاع شروع و پایان اعمال می‌شوند.

تأثیر تبدیل‌ها

گرادیان رسم می‌شود در سیستم مختصات بافت گرافیکی جاری با در نظر گرفتن تبدیل آن (CTM — Current Transformation Matrix). اعمال CGContextTranslateCTM، CGContextScaleCTM یا CGContextRotateCTM قبل از فراخوانی تابع رسم، موقعیت و مقیاس گرادیان را تغییر می‌دهد. این امکان استفاده مجدد از یک CGGradient برای نواحی مختلف بدون ایجاد اشیاء جدید را فراهم می‌کند.

گزینه‌ها: گسترش، هموارسازی و ماسک‌گذاری

Core Graphics چندین مکانیزم اضافی برای مدیریت گرادیان‌ها فراهم می‌کند: هموارسازی (antialiasing)، ماسک‌گذاری از طریق ماسک برش (clipping mask) و ترکیب با افکت‌های شفافیت. هموارسازی به طور پیش‌فرض در بافت گرافیکی فعال است و از طریق CGContextSetShouldAntialias کنترل می‌شود.

ماسک برش امکان محدود کردن ناحیه رسم گرادیان به یک شکل دلخواه را فراهم می‌کند. قبل از فراخوانی CGContextDrawLinearGradient باید یک مسیر از طریق CGContextBeginPath، CGContextAddPath و CGContextClip تعریف شود. گرادیان تنها در داخل ناحیه محدود شده توسط این مسیر رسم می‌شود. این به طور گسترده برای ایجاد آیکون‌های گرادیانی، دکمه‌ها و نوارهای پیشرفت استفاده می‌شود.

گسترش گرادیان (extend) — یکی دیگر از پارامترهای مهم است. هنگام استفاده از kCGGradientDrawsBeforeStartLocation، Core Graphics رنگ اولین توقف را به کل ناحیه تا startPoint برون‌یابی می‌کند. بدون این گزینه، ناحیه خارج از گرادیان خالی (شفاف) باقی می‌ماند. ترکیب هر دو گزینه تضمین می‌کند که کل مستطیل بافت گرافیکی با گرادیان پر شود، حتی اگر startPoint و endPoint در داخل آن باشند.

نمونه کد در Swift

بیایید نمونه‌های عملی ایجاد و رسم گرادیان‌ها در iOS با استفاده از CGGradient و Core Graphics را بررسی کنیم.

گرادیان خطی با سه رنگ

مثال یک گرادیان خطی با سه رنگ (آبی، سبز، قرمز) ایجاد می‌کند و آن را به صورت مورب در 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) {
    // ایجاد مسیر برش دایره‌ای
    let circlePath = CGMutablePath()
    circlePath.addEllipse(in: rect)
    ctx.addPath(circlePath)
    ctx.clip()

    // رسم گرادیان درون ماسک برش
    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])
}