CGColor และ CGColorSpace: คืออะไร โมเดลสี และวิธีจัดการกับสีเหล่านั้น

CGColor และ CGColorSpace คืออะไร?

CGColor เป็นออบเจ็กต์พื้นฐานของ Core Graphics ที่แทนสี โครงสร้าง CGColor จัดเก็บค่าตัวเลขขององค์ประกอบสีและการอ้างอิงไปยัง CGColorSpace — พื้นที่สีที่องค์ประกอบเหล่านี้ถูกตีความ หากไม่เชื่อมโยงกับพื้นที่สี ค่าตัวเลขขององค์ประกอบก็ไม่มีความหมาย: ค่า (1.0, 0.0, 0.0) ใน RGB คือสีแดง แต่ใน CMYK คือสีฟ้า

CGColorSpace เป็นออบเจ็กต์ที่กำหนดโมเดลสีและช่วงของค่าที่สามารถแสดงได้ (gamut) พื้นที่สีกำหนดกฎเกณฑ์ที่องค์ประกอบเชิงตัวเลขเปลี่ยนเป็นสีที่มองเห็นได้บนอุปกรณ์ส่งออกเฉพาะ Core Graphics รองรับทั้งพื้นที่มาตรฐานที่โปรไฟล์ ICC และพื้นที่กำหนดเองที่สร้างผ่าน CGColorSpace ด้วยตารางการแปลงแบบกำหนดเอง

สถาปัตยกรรมที่แยกสีออกจากพื้นที่สีเป็นคุณลักษณะสำคัญของ Core Graphics ที่ทำให้แตกต่างจาก API ที่สีถูกจัดเก็บเป็นชุดตัวเลขธรรมดา วิธีการนี้ช่วยให้ Core Graphics ดำเนินการจัดการสีที่ไม่ขึ้นกับอุปกรณ์: ออบเจ็กต์ CGColor เดียวกันสามารถแสดงได้อย่างถูกต้องบนหน้าจอต่างๆ ด้วยการแปลงองค์ประกอบอัตโนมัติผ่านโปรไฟล์ CGColorSpace

สีทำงานอย่างไรใน Core Graphics

Core Graphics ใช้สีผ่านโมเดลที่อิงตามโปรไฟล์ ICC (International Color Consortium) แต่ละ CGColorSpace มีการอ้างอิงถึงโปรไฟล์ ICC — คำอธิบายมาตรฐานว่าองค์ประกอบสีถูกแปลงเป็น CIE XYZ อย่างไร — พื้นที่สีที่ไม่ขึ้นกับอุปกรณ์ ซึ่งช่วยให้ Core Graphics ดำเนินการชดเชยสีโดยอัตโนมัติระหว่างหน้าจอต่างๆ

วงจรชีวิตของออบเจ็กต์ CGColor

เมื่อสร้าง CGColor ผ่านฟังก์ชัน CGColorCreate องค์ประกอบจะถูกจับจากอาร์เรย์ที่ส่งเข้าไปและเชื่อมโยงกับ CGColorSpace ที่ระบุ Core Graphics คัดลอกองค์ประกอบไปยังการแสดงผลภายในและสร้างความสัมพันธ์กับพื้นที่สี หลังจากนั้น สีก็พร้อมใช้งานในการดำเนินการกราฟิกใดๆ — การเติม, การขีดเส้น, การไล่สี, เงา

การจัดการสีผ่าน ColorSync

บน macOS การจัดการสีจะดำเนินการผ่านเฟรมเวิร์ก ColorSync ที่รวมอยู่ใน Core Graphics ColorSync ติดตามการปรับเทียบหน้าจอและแปลงองค์ประกอบจากพื้นที่สีต้นทางไปยังพื้นที่อุปกรณ์เป้าหมายโดยอัตโนมัติ บน iOS การจัดการสีถูกนำไปใช้ผ่าน Quartz Core พร้อมรองรับช่วงสีที่กว้าง (Display P3) เริ่มตั้งแต่ iPhone 7

โมเดลสีพื้นฐานใน CGColorSpace

CGColorSpace รองรับโมเดลสีพื้นฐานสี่แบบ: RGB (DeviceRGB, sRGB, Display P3), Gray (DeviceGray), CMYK (DeviceCMYK) และ Lab แต่ละโมเดลกำหนดจำนวนและความหมายขององค์ประกอบสี RGB ใช้สามช่องสัญญาณ — แดง, เขียว, น้ำเงิน; Gray ใช้ช่องสัญญาณความสว่างหนึ่งช่อง; CMYK ใช้สี่ช่องสัญญาณสำหรับการพิมพ์; Lab ใช้สามช่องสัญญาณ: ความสว่างและสององค์ประกอบความแตกต่างของสี

DeviceRGB และ sRGB

DeviceRGB เป็นพื้นที่สีเริ่มต้นที่พบบ่อยที่สุดของ Core Graphics มันใช้ช่วงสีของจอ LCD มาตรฐานโดยไม่มีการโปรไฟล์ ICC เมื่อสร้างบริบทกราฟิก UIView หรือ NSView Core Graphics จะกำหนด DeviceRGB เป็นพื้นที่สีเริ่มต้นโดยอัตโนมัติ sRGB เป็นเวอร์ชันที่โปรไฟล์ ICC ด้วยช่วงและแกมมาที่คงที่ แนะนำสำหรับเนื้อหาเว็บ

Display P3 — ช่วงสีที่กว้าง

Display P3 เป็นพื้นที่สีที่อิงตามมาตรฐาน DCI-P3 ใช้ในอุปกรณ์ iOS สมัยใหม่ที่มีจอแสดงผลสีกว้าง ครอบคลุมสีที่มองเห็นได้มากกว่า sRGB ประมาณ 25% โดยเฉพาะในพื้นที่สีเขียวและแดงของสเปกตรัม หากต้องการทำงานกับ Display P3 บน iOS ให้ใช้ค่าคงที่ kCGColorSpaceDisplayP3 ซึ่งมีให้ใช้งานตั้งแต่ iOS 9.3

การสร้างและการจัดการ CGColor

CGColor ถูกสร้างขึ้นผ่านฟังก์ชัน CGColorCreate ซึ่งรับ CGColorSpace และอาร์เรย์ขององค์ประกอบ CGFloat จำนวนองค์ประกอบขึ้นอยู่กับโมเดลสี: 1 สำหรับ Gray, 3 สำหรับ RGB, 4 สำหรับ CMYK เมื่อสร้างแล้ว CGColor เป็นออบเจ็กต์ที่ไม่สามารถเปลี่ยนแปลงได้ (immutable) — คุณไม่สามารถเปลี่ยนองค์ประกอบของมันได้ สามารถสร้างสีใหม่เท่านั้น

Core Graphics ยังมีฟังก์ชัน CGColorCreateGenericRGB, CGColorCreateGenericGray และ CGColorCreateGenericCMYK สำหรับสร้างสีในพื้นที่สีมาตรฐาน (ทั่วไป) ฟังก์ชันเหล่านี้ทำให้โค้ดง่ายขึ้นโดยไม่จำเป็นต้องสร้าง CGColorSpace อย่างชัดเจน นอกจากนี้ Quartz 2D ยังกำหนดค่าคงที่สำหรับสีพื้นฐาน: kCGColorWhite, kCGColorBlack, kCGColorClear

เมื่อสร้างสี ลำดับการระบุองค์ประกอบมีความสำคัญ — ต้องตรงกับลำดับช่องสัญญาณที่กำหนดโดยโมเดลพื้นที่สีอย่างเคร่งครัด RGB: แดง (0.0–1.0), เขียว, น้ำเงิน, อัลฟา (0.0–1.0) Gray: ความสว่าง, อัลฟา CMYK: ฟ้า, ม่วงแดง, เหลือง, ดำ, อัลฟา การละเมิดลำดับองค์ประกอบทำให้แสดงสีไม่ถูกต้องโดยไม่มีข้อผิดพลาดในการคอมไพล์

ช่องสัญญาณอัลฟาและความโปร่งใส

ช่องสัญญาณอัลฟา เป็นองค์ประกอบที่สี่ (หรือที่สองสำหรับ Gray) ที่ควบคุมความโปร่งใสของสี ค่า 1.0 สอดคล้องกับความทึบแสงเต็มที่, 0.0 สอดคล้องกับความโปร่งใสเต็มที่ ช่องสัญญาณอัลฟาใน CGColor เป็นทางเลือก: ฟังก์ชัน CGColorGetAlpha คืนค่าอัลฟาปัจจุบัน ซึ่งโดยค่าเริ่มต้นคือ 1.0 เมื่อสร้างผ่านฟังก์ชันพื้นฐาน เมื่อผสมสี Core Graphics ใช้การประกอบอัลฟาตามกฎ Porter-Duff Source Over

การทำงานกับ CGColorSpace

CGColorSpace ถูกสร้างขึ้นผ่านฟังก์ชันโรงงานของ Core Graphics: CGColorSpaceCreateDeviceRGB, CGColorSpaceCreateDeviceGray, CGColorSpaceCreateDeviceCMYK หรือ CGColorSpaceCreateWithName สำหรับพื้นที่ที่มีชื่อ (sRGB, Display P3, Generic Gray) ออบเจ็กต์ CGColorSpace ไม่สามารถเปลี่ยนแปลงได้และปลอดภัยต่อเธรด — ออบเจ็กต์เดียวกันสามารถใช้ในบริบทกราฟิกหลายแห่ง

การรับ CGColorSpace พื้นฐาน

Core Graphics มีพื้นที่สีที่กำหนดไว้ล่วงหน้าหลายแห่งผ่านค่าคงที่ที่มีชื่อ: kCGColorSpaceSRGB, kCGColorSpaceDisplayP3, kCGColorSpaceGenericGrayGamma2_2 ค่าคงที่เหล่านี้ถูกส่งไปยัง CGColorSpaceCreateWithName สำหรับอุปกรณ์ iOS ที่มีช่วงสีกว้าง แนะนำให้ใช้ Display P3 เนื่องจาก sRGB อาจไม่ใช้ความสามารถของหน้าจออย่างเต็มที่

โปรไฟล์ ICC และ CGColorSpace แบบกำหนดเอง

โปรไฟล์ ICC เป็นไฟล์มาตรฐานที่อธิบายลักษณะสีของอุปกรณ์ Core Graphics อนุญาตให้สร้าง CGColorSpace ตามโปรไฟล์ ICC ใดๆ ผ่าน CGColorSpaceCreateWithICCProfile สิ่งนี้ใช้ในแอปพลิเคชันมืออาชีพสำหรับการพิมพ์ภาพและก่อนพิมพ์ซึ่งต้องการความแม่นยำตรงกับเครื่องพิมพ์หรือจอภาพเฉพาะ

การแปลงระหว่างพื้นที่สี

Core Graphics ดำเนินการแปลงระหว่างพื้นที่สีโดยอัตโนมัติระหว่างการเรนเดอร์ผ่านฟังก์ชัน CGContextSetFillColorWithColor หรือ CGContextSetStrokeColorWithColor หากพื้นที่สีของบริบทกราฟิกแตกต่างจากพื้นที่สีของ CGColor ที่ส่งเข้าไป Quartz 2D จะทำการแปลงโดยใช้โปรไฟล์ ICC ของทั้งสองพื้นที่

สำหรับการแปลงสีอย่างชัดเจน ให้ใช้ CGColorCreateCopyByMatchingToColorSpace — ฟังก์ชันที่สร้าง CGColor ใหม่ซึ่งองค์ประกอบถูกคำนวณใหม่จากพื้นที่ต้นทางไปยังพื้นที่เป้าหมาย ตาม Apple Technical Note TN2313 (2024) เมื่อแปลงจาก Display P3 เป็น sRGB สีนอกช่วง sRGB จะถูกตัดออก ทำให้สูญเสียความอิ่มของสี ซึ่งเห็นได้ชัดเจนโดยเฉพาะในสีเขียวและแดงสด

ColorSync บน macOS ให้การจัดการสีระดับระบบในสแต็กกราฟิก หากแอปพลิเคชันไม่ได้ระบุพื้นที่สีอย่างชัดเจน Core Graphics จะใช้พื้นที่หน้าจอที่ได้จาก ColorSync ซึ่งรับประกันว่าสีจะดูเหมือนกันบนจอภาพต่างๆ แม้ว่าจะใช้โปรไฟล์สีต่างกัน

ตัวอย่างโค้ด Swift

มาดู ตัวอย่างเชิงปฏิบัติ ของการสร้างและการใช้ CGColor และ CGColorSpace ในแอปพลิเคชัน iOS โค้ดเขียนด้วย Swift โดยใช้ฟังก์ชัน Core Graphics

การสร้าง CGColor ด้วยพื้นที่สีต่างๆ

ตัวอย่างนี้แสดงการสร้างสีแดงในสามพื้นที่สีที่แตกต่างกัน แม้จะมีองค์ประกอบ RGB เหมือนกัน สีจะดูแตกต่างกันขึ้นอยู่กับช่วงสีของ CGColorSpace

import CoreGraphics

// การสร้างสีใน DeviceRGB
let rgbSpace = CGColorSpaceCreateDeviceRGB()
let redColor = CGColorCreate(rgbSpace, [1.0, 0.0, 0.0, 1.0])

// การสร้างสีใน Display P3
let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let p3RedColor = CGColorCreate(p3Space, [1.0, 0.0, 0.0, 1.0])

// การสร้างสีเทา
let graySpace = CGColorSpaceCreateDeviceGray()
let grayColor = CGColorCreate(graySpace, [0.5, 1.0])

การแปลงสีระหว่างพื้นที่สี

ตัวอย่างนี้แปลงสี เขียวสด จาก Display P3 เป็น sRGB ในระหว่างการแปลงดังกล่าว สีนอกช่วง sRGB จะถูกปรับซึ่งอาจเปลี่ยนสี

let p3Space = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3)
let sRGBSpace = CGColorSpaceCreateWithName(kCGColorSpaceSRGB)

// เขียวสดใน Display P3 (นอกช่วง sRGB)
let p3Green = CGColorCreate(p3Space, [0.0, 1.0, 0.0, 1.0])

// แปลงเป็น sRGB
let srgbGreen = CGColorCreateCopyByMatchingToColorSpace(
    sRGBSpace, p3Green, kCGRenderingIntentDefault
)

การใช้ CGColor ในบริบทกราฟิก

ตัวอย่างนี้สาธิต การวาดวงกลม ที่เติมสีโดยใช้ CGColor ใน UIView ที่กำหนดเอง เมธอด draw จะได้รับบริบทกราฟิกปัจจุบัน UIGraphicsGetCurrentContext ซึ่งกำหนดสีเติม

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

        let rgbSpace = CGColorSpaceCreateDeviceRGB()
        let blueColor = CGColorCreate(
            rgbSpace,
            [0.2, 0.4, 1.0, 1.0]
        )

        ctx.setFillColor(blueColor)
        ctx.fillEllipse(in: CGRect(x: 50, y: 50,
                                  width: 200, height: 200))
    }
}