Core Graphics — 概要、動作原理、2Dグラフィックスのフレームワーク

Core Graphicsとは？

Core Graphics（Quartz 2Dとしても知られる）は、Appleの2Dグラフィックスエンジンを実装するフレームワークです。これはQuartzポータブルグラフィックスライブラリに基づいており、各アクションが紙に描くようなシーケンスのコマンドであるページベースの描画モデルを使用します。Core Graphicsはアンチエイリアシング、透明度（アルファコンポジット）、ICC色空間をサポートしています。

Core Graphicsのアーキテクチャは、ターゲット出力デバイス（スクリーン、プリンター、PDFドキュメント、ラスターバッファ）をカプセル化するグラフィックスコンテキスト（CGContext）を中心に構築されています。コンテキストは現在の設定（色、線の太さ、変換、クリッピング領域、フォント）を管理します。このアプローチにより、描画コードを変更することなく、異なる出力デバイスに対して統一されたAPIを提供します。

Core Graphicsは主にCPU上で動作し、ベクターモデル（解像度非依存）を使用します。つまり、線や曲線は描画時に現在のデバイス解像度でラスタライズされます。Metalとは異なり、Core Graphicsは明示的なGPUリソース管理を必要としません。システムがすべての最適化を処理します。ほとんどの2Dタスク（グラフィック、チャート、カスタムUI要素）では、Core Graphicsのパフォーマンスは60 FPSを維持するのに十分です。

アーキテクチャと主要な型

Core Graphicsには約50の基本型（不透明型）が含まれており、それぞれが特定の機能を担当します。すべての型はCore Foundationのメモリ管理ルールに従います。名前にCreateを含む関数を通じて作成され、CGReleaseの呼び出しが必要で、Objective-CではARC互換ではありません（ただしSwiftはCF_RETURNS_RETAINEDアノテーションを通じてメモリを自動管理します）。

Core Graphicsの主要な型

CGContext — 描画コンテキスト、フレームワークの中心的な型。CGPath — 不変のベクターパス。CGColor — 指定された色空間を持つ色。CGGradient — グラデーション塗りつぶし。CGImage — ラスター画像。CGLayer — 繰り返し描画のための最適化されたオフラインバッファ。CGDataProvider — 画像のデータソース。CGColorSpace — 色空間（sRGB、Display P3、Gray）。

各型は最小限のオーバーヘッドで設計されています。CGPathはキャッシュして異なるコンテキスト間で再利用でき、CGColorは渡されるとGPUハードウェア表現に変換され、CGLayerは事前ラスタライズされたコンテンツを保存します。このアーキテクチャにより、Core GraphicsはシンプルなUIタスクとプロフェッショナルなグラフィックスエディタの両方で効率的に動作できます。

CGPath: ベクターパスとその最適化

CGPathは、直線、ベジエ曲線、円弧、閉じなどの幾何学的セグメントのシーケンスを記述する不変オブジェクトです。UIBezierPathとは異なり、CGPathには描画メソッドが含まれていません。ジオメトリのみを保存します。描画するには、CGPathをコンテキストに追加し（CGContextAddPath）、strokePathまたはfillPathを通じてレンダリングします。不変性により、スレッドセーフティとキャッシュ可能性が保証されます。

パスの作成と最適化

CGPathCreateMutableは段階的な構築のための可変パス（CGMutablePathRef）を作成します。最終アセンブリ後、不変のCGPathRefに変換されます。AppleはCGPathのポイント数を最小限に抑えることを推奨しています。あまりに複雑なパス（1000セグメント以上）はラスタライズを遅くします。最適化には、冗長な共線ポイントを削除するCGPathCreateCopyBySimplifyingPathを使用してください。

2つのCGPathオブジェクト間で形状をアニメーション化するには、CAShapeLayerのpathプロパティでCABasicAnimationを使用できます。制限：両方のCGPathが同じ数のセグメント（制御点）を持つ必要があります。CGPathApply関数を使用すると、パスのすべての要素をトラバースしてその構造を比較できます。セグメントが一致しない場合、アニメーションはぎくしゃくします。この場合は、手動のポイント補間のためにCADisplayLinkを使用してください。

// 可変パスを作成
let mutablePath = CGMutablePath()
mutablePath.moveTo(to: CGPoint(x: 0, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 0))
mutablePath.addLine(to: CGPoint(x: 100, y: 100))
mutablePath.closeSubpath()

// 安全なキャッシュのために不変に変換
let immutablePath: CGPath = mutablePath
CATransaction.perform {
    shapeLayer.path = immutablePath
}

グラデーション: CGGradientとCGShading

CGGradientは、直線に沿って（線形グラデーション）または中心から外側へ（放射状グラデーション）2つ以上の色間の滑らかな遷移を定義するオブジェクトです。CGGradientは、指定された色空間、CGColorRefの配列、0.0から1.0までのストップ位置の配列で作成されます。作成後、グラデーションは異なるコンテキストで複数回再利用できます。

高度なグラデーションのためのCGShading

CGShadingは、パスに沿った色変化関数を定義できるより強力なメカニズムです。固定の色セットで動作するCGGradientとは異なり、CGShadingは各ポイントで色を計算するコールバック関数（CGFunctionRef）を使用します。これにより、非線形遷移と複合色スキームを持つ複雑なグラデーションを作成できます。

形状内にグラデーションを描画するには、その形状のパスにクリップが必要です。手順：コンテキストにパスを追加し、CGContextClipを呼び出し、グラデーションを描画します。クリップがないと、グラデーションはコンテキスト全体を塗りつぶします。iOSでは、CGGradientがよりシンプルでパフォーマンスの高いオプションとして推奨されています。CGShadingはカスタムカラー関数にのみ適しています。

func drawGradient(ctx: CGContext, rect: CGRect) {
    let colors = [UIColor.red.cgColor, UIColor.blue.cgColor] as CFArray
    guard let gradient = CGGradient(
        colorsSpace: CGColorSpaceCreateDeviceRGB(),
        colors: colors,
        locations: [0.0, 1.0]
    ) else { return }

    ctx.saveGState()
    ctx.addEllipse(in: rect)
    ctx.clip()
    ctx.drawLinearGradient(
        gradient,
        start: CGPoint(x: rect.midX, y: rect.minY),
        end: CGPoint(x: rect.midX, y: rect.maxY),
        options: []
    )
    ctx.restoreGState()
}

画像の操作: CGImageとCGLayer

CGImageはCore Graphicsのラスター画像で、ファイルからロード、プログラムによる作成、またはUIImageから取得できます。CGImageには、ピクセルデータ、色空間情報、サイズ、ビット深度、データレイアウトが含まれます。UIImageとは異なり、CGImageはRetinaスケーリングを管理しません。この責任はscaleパラメータを通じて開発者にあります。

CGLayer — 繰り返し描画の最適化

CGLayerは静的コンテンツの事前ラスタライズのためのオフラインバッファです。同じ描画コマンドセットが繰り返し実行される場合（例えば背景パターン）、CGLayerは一度ラスタライズしてからコンテキストにコピーするだけです。Appleによると、CGLayerを使用すると、繰り返し描画がCPUで2〜5倍、ハードウェアアクセラレーションで最大10倍高速化されます。

画像のロードには、CGImageSourceを使用してください。GIF/APNGからメタデータ、サムネイル、個別フレームを読み取るための強力なAPIです。CGImageSourceはプログレッシブロードと必要なフラグメントのみの取得を可能にします。大きな画像（画面サイズを超える）を扱う場合は、ディスクキャッシュ付きのCGImageSourceを作成し、CGImageSourceCreateThumbnailAtIndexを使用して縮小版を表示することを推奨します。

func createLayer(ctx: CGContext, size: CGSize) -> CGLayer? {
    guard let layer = CGLayer(ctx, size: size, auxiliaryInfo: nil) else { return nil }
    let layerCtx = layer.context !

    // 一度描画
    layerCtx.setFillColor(UIColor.lightGray.cgColor)
    layerCtx.addEllipse(in: CGRect(origin: .zero, size: size))
    layerCtx.fillPath()
    return layer
}

// draw()での使用
for i in 0..<20 {
    ctx.draw(layer, at: CGPoint(x: CGFloat(i) * 30, y: 0))
}

Core Graphicsのコード例

Core Graphicsを使用して画像に透かしを表示するカスタムViewを作成しましょう。透かしには元の画像の上に半透明テキストとベクターロゴが含まれます。このコードは、単一のコンテキストでのCGContext、CGImage、テキスト、透明度の操作を示しています。

class WatermarkView: UIView {

    private let watermarkText = "IT Sectr"
    private let watermarkOpacity: CGFloat = 0.3

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

        // 背景画像を描画
        UIImage(named: "background")?.draw(in: rect)

        // 透かし透明度を設定
        ctx.saveGState()
        ctx.translateBy(x: rect.midX, y: rect.midY)
        ctx.rotate(by: -.pi / 6)

        // 半透明テキスト
        let attributes: NSAttributedString.Attributes = [
            .font: UIFont.boldSystemFont(ofSize: 48),
            .foregroundColor: UIColor.white.withAlphaComponent(watermarkOpacity)
        ]
        let textSize = watermarkText.size(withAttributes: attributes)
        watermarkText.draw(
            at: CGPoint(x: -textSize.width / 2, y: -textSize.height / 2),
            withAttributes: attributes
        )

        // テキストの下のベクターアイコン（十字の円）
        ctx.setStrokeColor(UIColor.white.withAlphaComponent(watermarkOpacity).cgColor)
        ctx.setLineWidth(3)
        ctx.addEllipse(in: CGRect(x: -25, y: -75, width: 50, height: 50))
        ctx.strokePath()
        ctx.moveTo(x: -15, y: -50)
        ctx.addLineTo(x: 15, y: -50)
        ctx.moveTo(x: 0, y: -65)
        ctx.addLineTo(x: 0, y: -35)
        ctx.strokePath()

        ctx.restoreGState()
    }
}

このコードはCore Graphicsの主要機能を使用しています：透かし効果を背景から分離するsaveGState/restoreGState、位置決めと回転のためのtranslateByとrotate、withAlphaComponentによる半透明テキスト、addEllipseとaddLineToによるベクターアイコン。透かし全体は背景画像の後に単一のコンポジションとして描画されます。

プロダクションで写真の透かしを作成する際は、パフォーマンスを考慮することが重要です。画像が画面より大きい場合は、透かしを適用する前にCGImageSourceCreateThumbnailAtIndexを使用して縮小してください。Core Graphicsはすべての操作をCPUで処理します。数十の画像をバッチ処理する場合は、UIのブロッキングを避けるためにバックグラウンドキューとCGBitmapContextを使用してください。