การใช้งาน Drawing USA flag in native GUI ในภาษา Objective-C

การสร้าง Graphics ในภาษา Objective-C ไม่ใช่เรื่องยาก ถ้าหากเรารู้จักใช้เครื่องมือที่ถูกต้อง ในบทความนี้เราจะมาพูดถึงการวาดธงชาติสหรัฐอเมริกา (USA Flag) โดยใช้ native GUI บน macOS โดยเฉพาะอย่างยิ่งการใช้งาน Cocoa framework มาพร้อมกันกับตัวอย่างโค้ดที่เรียบง่ายเพื่อให้คุณเข้าใจการทำงานได้ดียิ่งขึ้น

ความรู้เบื้องต้นเกี่ยวกับ Cocoa

Cocoa เป็น framework ที่ใช้สำหรับการพัฒนาแอปพลิเคชันบน macOS และ iOS ซึ่งช่วยให้เราเขียนโปรแกรมและจัดการกับ Graphics ได้อย่างมีประสิทธิภาพ ในการวาดรูปโดยใช้ Cocoa เรามักจะใช้ `NSBezierPath` และ `NSColor` เป็นหลัก

ขั้นตอนการสร้างแอปพลิเคชัน

- เปิด Xcode และสร้างโปรเจคใหม่ เลือก "Cocoa Application" จากนั้นตั้งชื่อโปรเจคของคุณ เช่น "Draw US Flag".

- เริ่มต้นในการวาดธงชาติสหรัฐอเมริกา โดยการสร้าง subview ใหม่ที่จะแสดงธง

ตัวอย่างโค้ดในการวาดธง

 #import "AppDelegate.h"

@interface FlagView : NSView
@end

@implementation FlagView

- (void)drawRect:(NSRect)dirtyRect {
    [super drawRect:dirtyRect];

    // วาดพื้นหลังของธงด้วยสีแดง
    NSRectFill(dirtyRect);

    // กำหนดตัวแปรสำหรับการวาดเส้น
    NSColor *white = [NSColor whiteColor];
    NSColor *blue = [NSColor colorWithRed:0.2 green:0.2 blue:0.6 alpha:1];

    // วาดแถบสีขาว
    CGFloat stripeHeight = dirtyRect.size.height / 13.0;
    for (int i = 0; i < 13; i++) {
        if (i % 2 == 1) {
            NSRect stripeRect = NSMakeRect(0, i * stripeHeight, dirtyRect.size.width, stripeHeight);
            [white setFill];
            NSRectFill(stripeRect);
        }
    }

    // วาดช่องสี่เหลี่ยมสีน้ำเงิน
    NSRect blueRect = NSMakeRect(0, 7 * stripeHeight, dirtyRect.size.width * 0.4, 5 * stripeHeight);
    [blue setFill];
    NSRectFill(blueRect);

    // วาดดาว (star) บนฟ้า
    for (int row = 0; row < 9; row++) {
        for (int col = 0; col < 6; col++) {
            if ((row % 2 == 0 && col < 5) || (row % 2 == 1 && col < 6)) {
                NSPoint starCenter = NSMakePoint((col + 0.5) * blueRect.size.width / 6,
                                                    (row + 0.5) * blueRect.size.height / 9 + (7 * stripeHeight));
                [self drawStarAt:starCenter radius:10];
            }
        }
    }
}

- (void)drawStarAt:(NSPoint)center radius:(CGFloat)radius {
    NSBezierPath *starPath = [NSBezierPath bezierPath];
    for (int i = 0; i < 5; i++) {
        CGFloat angle = i * 4 * M_PI / 5 - M_PI / 2;
        NSPoint point = NSMakePoint(center.x + radius * cos(angle), center.y + radius * sin(angle));
        if (i == 0) {
            [starPath moveToPoint:point];
        } else {
            [starPath lineToPoint:point];
        }
    }
    [starPath closePath];
    [[NSColor whiteColor] setFill];
    [starPath fill];
}
@end

@implementation AppDelegate

- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
    NSWindow *window = [[NSWindow alloc] initWithContentRect:NSMakeRect(0, 0, 400, 250)
                                                   styleMask:(NSWindowStyleMaskTitled | NSWindowStyleMaskClosable | NSWindowStyleMaskResizable)
                                                     backing:NSBackingStoreBuffered
                                                       defer:NO];
    [window setTitle:@"USA Flag"];

    FlagView *flagView = [[FlagView alloc] initWithFrame:[window.contentView bounds]];
    [window.contentView addSubview:flagView];

    [window makeKeyAndOrderFront:nil];
}

@end

อธิบายการทำงานของโค้ด

1. `drawRect:` เป็น method ที่ถูกเรียกทุกครั้งเมื่อมีการวาดภาพใน view.

2. เราใช้ `NSRectFill` เพื่อเติมสีพื้นหลังของธงชาติ.

3. ใช้ loop เพื่อวาดแถบสีขาวบริเวณธง และทำการคำนวณตำแหน่งของสีและรูปทรงต่างๆ.

4. ในการวาดดาว เราสร้าง method `drawStarAt:` ที่ใช้ในการวาดดาว 5 แฉกซ้ำกันในตำแหน่งที่ต้องการ.

Use Case ในโลกจริง

การวาดธงชาติหรือกราฟิกอื่น ๆ นี้สามารถนำไปใช้ในหลาย ๆ สถานการณ์ เช่น:

เชิญชวนเรียนรู้การโปรแกรมที่ EPT

ลองมาเริ่มต้นการเดินทางในโลกแห่งการโปรแกรมและสร้างผลงานที่น่าทึ่งไปกันเถอะ!

หมายเหตุ: ข้อมูลในบทความนี้อาจจะผิด โปรดตรวจสอบความถูกต้องของบทความอีกครั้งหนึ่ง บทความนี้ไม่สามารถนำไปใช้อ้างอิงใด ๆ ได้ ทาง EPT ไม่ขอยืนยันความถูกต้อง และไม่ขอรับผิดชอบต่อความเสียหายใดที่เกิดจากบทความชุดนี้ทั้งทางทรัพย์สิน ร่างกาย หรือจิตใจของผู้อ่านและผู้เกี่ยวข้อง