0Pricing
Swift Academy · บทเรียน

การวาดแบบกำหนดเองด้วย Core Graphics

วาดเส้นทางและรูปร่างใน draw(_:)

การวาดแบบกำหนดเองด้วย Core Graphics เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

เมื่อใดควรวาดเนื้อหาเอง

เมื่อเลเยอร์และรูปภาพไม่สามารถแสดงรูปร่างที่ต้องการได้ เช่น แผนภูมิ ลายเซ็น หรือส่วนควบคุมแบบกำหนดเอง คุณสามารถวาดด้วยตนเองโดยใช้ Core Graphics (Quartz 2D)

การเขียนทับ draw(_:)

สร้างคลาสย่อยของ UIView และเขียนทับ draw(_:) UIKit จะเรียกใช้เมธอดนี้พร้อมบริบทที่กำหนดค่าไว้ แล้วคุณจึงสั่งงานการวาดภายในเมธอดนี้

import UIKit
final class ChartView: UIView {
    override func draw(_ rect: CGRect) {
        // drawing commands go here
    }
}

บริบทกราฟิก

ภายใน draw(_:) ให้รับบริบท CGContext ปัจจุบัน บริบทนี้เป็นผืนผ้าใบที่เก็บสถานะไว้ คุณตั้งค่าสีและความกว้างของเส้น จากนั้นจึงวาดเส้นขอบหรือเติมสี

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }
    ctx.setFillColor(UIColor.systemTeal.cgColor)
    ctx.fill(rect)
}

การสร้างเส้นทาง

CGPath (หรือ UIBezierPath) ใช้อธิบายเส้น เส้นโค้ง และรูปร่างต่าง ๆ ให้เลื่อนไปยังจุดเริ่มต้น จากนั้นเพิ่มเส้นและเส้นโค้ง

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 50))
path.addLine(to: CGPoint(x: 0, y: 100))
path.close()

การวาดเส้นขอบและการเติมสี

การวาดเส้นขอบจะแสดงเส้นรอบรูปของเส้นทาง ส่วนการเติมสีจะลงสีภายใน ตั้งค่าสีและความกว้าง จากนั้นเรียกใช้ stroke() หรือ fill()

UIColor.systemRed.setStroke()
let line = UIBezierPath()
line.lineWidth = 3
line.move(to: CGPoint(x: 10, y: 10))
line.addLine(to: CGPoint(x: 90, y: 90))
line.stroke()

เส้นโค้ง

เพิ่มเส้นโค้งที่ราบรื่นด้วยส่วนของเส้นโค้งเบซิเยร์แบบกำลังสอง (addQuadCurve) หรือแบบลูกบาศก์ (addCurve) โดยระบุจุดควบคุม

let p = UIBezierPath()
p.move(to: CGPoint(x: 0, y: 100))
p.addCurve(to: CGPoint(x: 200, y: 100),
           controlPoint1: CGPoint(x: 50, y: 0),
           controlPoint2: CGPoint(x: 150, y: 200))

สถานะของบริบท: บันทึกและเรียกคืน

บริบทจะเก็บสถานะไว้ ครอบการแปลงและการตัดด้วย saveGState()/restoreGState() เพื่อไม่ให้การเปลี่ยนแปลงส่งผลต่อการวาดในภายหลัง

ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()

การไล่ระดับสีและเงา

Core Graphics สามารถวาดการไล่ระดับสี (CGGradient ร่วมกับ drawLinearGradient) และเงา (setShadow(offset:blur:color:)) ลงในบริบทได้โดยตรง

ctx.setShadow(offset: CGSize(width: 0, height: 2),
              blur: 4,
              color: UIColor.black.cgColor)

การตัด

เพิ่มเส้นทางแล้วเรียกใช้ clip() เพื่อจำกัดการวาดที่ตามมาให้อยู่ภายในบริเวณนั้น เหมาะสำหรับรูปภาพมุมมนหรือการเติมสีแบบมีหน้ากาก

let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the oval

ประสิทธิภาพและ setNeedsDisplay

draw(_:) ทำงานบน CPU และมีต้นทุนค่อนข้างสูง ให้เรียกวาดใหม่เฉพาะเมื่อจำเป็นผ่าน setNeedsDisplay() และทำโค้ดการวาดให้กระชับ

func updateData() {
    self.data = newData
    setNeedsDisplay() // schedule one redraw
}

การวาดนอกหน้าจอ

หากต้องการบิตแมปที่นำกลับมาใช้ได้ ให้เรนเดอร์ลงในรูปภาพด้วย UIGraphicsImageRenderer แทนการวาดใหม่ทุกเฟรม

let renderer = UIGraphicsImageRenderer(size: CGSize(width: 100, height: 100))
let image = renderer.image { ctx in
    UIColor.systemBlue.setFill()
    ctx.fill(CGRect(x: 0, y: 0, width: 100, height: 100))
}

ตรวจสอบความเข้าใจอย่างรวดเร็ว: Core Graphics

ทดสอบความเข้าใจเกี่ยวกับการวาดแบบกำหนดเองของคุณ

ทบทวน: การวาดแบบกำหนดเองด้วย Core Graphics

เขียนทับ draw(_:) และส่งคำสั่งไปยัง CGContext: สร้างเส้นทางด้วยเส้นและเส้นโค้งเบซิเยร์ จากนั้นวาดเส้นขอบหรือเติมสี แยกการแปลงและการตัดออกจากกันด้วย saveGState()/restoreGState() และเพิ่มการไล่ระดับสี เงา รวมถึงพื้นที่ตัดได้โดยตรง

การวาดเป็นงานของ CPU ดังนั้นให้วาดใหม่ผ่าน setNeedsDisplay() เฉพาะเมื่อจำเป็น และแคชบิตแมปที่นำกลับมาใช้ได้ด้วย UIGraphicsImageRenderer

คำถามที่พบบ่อย

บทเรียน “การวาดแบบกำหนดเองด้วย Core Graphics” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การวาดแบบกำหนดเองด้วย Core Graphics” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การวาดแบบกำหนดเองด้วย Core Graphics”

วาดเส้นทางและรูปร่างใน draw(_:) คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การวาดแบบกำหนดเองด้วย Core Graphics” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน CALayer
  2. แอนิเมชันโดยนัยและโดยชัดแจ้ง
  3. การแปลงและเอฟเฟกต์สามมิติ
  4. การวาดแบบกำหนดเองด้วย Core Graphics
← กลับไปที่ Swift Academy