Core Graphicsによるカスタム描画
draw(_:)でパスや図形を描画します。
「Core Graphicsによるカスタム描画」はCoddyKit上の無料Swift Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これは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によるカスタム描画」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Swift Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Swift Academyコースには全4レッスンが含まれています。
「Core Graphicsによるカスタム描画」で何を学びますか？
draw(_:)でパスや図形を描画します。 ブラウザで直接実行するハンズオンコードでSwift Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Swift Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSwift Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「Core Graphicsによるカスタム描画」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSwift Academyレッスンでコードを書いて実行できますか？
はい。すべてのSwift Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- CALayerの基礎
- 暗黙的アニメーションと明示的アニメーション
- トランスフォームと3Dエフェクト
- Core Graphicsによるカスタム描画