MOSA Multi-OS Software Artists

MOSAはソフトウェア開発者を支援します

MOSA「iOS基礎技術入門シリーズ」トップへ戻る

Core Graphics 入門

 

  
 

「Core Graphics 入門」概要

Core Graphics 入門」には、iOSのCore Graphicsフレームワークに関するサンプルアプリのXcode 5プロジェクトと、それを解説した入門書籍(iBooks対応 93ページのePubファイル)が含まれています。これにより、サンプルアプリ、iBooks用の入門書籍、ソースコードの3点を活用しながらCore Graphicsの使用方法を習得できます。書籍やサンプルの解説内容はiOS 6までの機能となっていますのでご注意ください。サンプルアプリの開発環境はXcode 5で、起動環境はiOS 6.0以上が搭載されたiPadiPad AiriPad miniとなります。

「Core Graphics 入門」目的

iOSにおける2D描画の基盤はCore Graphicsフレームワークです。Core Graphicsは、Objective-CのメソッドではなくC APIベースです。その歴史は長く(初代OS Xから存在)ほとんどの機能がフィックスされているため、iOSのバージョンアップで新機能が追加されることは殆どありません。その代わり、一度確実にその仕組みを把握してしまえば、開発者の手に馴染んだ頼れる道具となります。また、総称としてはCore Graphicsが使われますが、2D描画に特化した機能はQuartz 2Dと呼ばれています。

Quartz 2Dの能力を十分発揮させたければ、UIKitなどの別フレームワークとの違いを把握することが肝要です。例えば、UIViewでの描画は左上原点ですが、Quartz 2Dでは左下原点での描画です。画像データの表現も、UIKitではUIImageクラスを使いますが、Quartz 2DではCGImageRefを使います。UIKitには、UIBezierPathクラスなどQuartz 2Dを使わない描画機能も多数あるため、開発するアプリに合わせた適切な選択が必要となります。本アプリと書籍では、Core Graphicsの中でもQuartz 2D APIに特化したサンプルソースコードを幾つか紹介することで、フレームワークの活用方法の習得を目指します。
 
著者:有限会社オッティモ 小池邦人

「Core Graphics 入門」書籍の章立て

(1) はじめに
(2) アプリ連携やサンプルソースコードについて
(3) Core Graphics関連の技術資料を入手する
(4) グラフィックスコンテキストとメモリ管理
(5) Quartz 2Dで用いる構造体
(6) Quartz 2D描画時の座標系
(7) 画像操作とマスク処理
(8) パス図形を描画する
(9) オフスクリーン描画について
(10) 描画の最適化を行う
(11) 高解像度ディスプレイへの対応
(12)カラー表現とフォント表現
(13)テキストを描画する
(14)パターン、陰影、シェーディング
(15)PDF操作とビューの印刷(AirPrint)
(16)別フレームワーク連携とその他

サンプルアプリの利用方法

XcodeプロジェクトをビルドしてサンプルアプリをiPadにインストールします。アプリが起動したら、まず最初にポップオーバーに表示されたiBooksアイコンをタップし、iBooks側に「Core Graphics 入門」書籍をインストールしてください。インストールが完了するとiBooksが起動して書籍がオープンされます。iPadにiBooksがインストールされていない場合には、App Store経由で先んじてiBooksを入手しておく必要があります。サンプルアプリをiOSシミュレータで起動した場合いは、iBooksが起動できないなど幾つかの機能が制限されますので、ご注意ください。

書籍はePubドキュメントです。本文については、iPad版 iBooksのテーマが「フルスクリーン」、フォント種類が「ヒラギノ明朝」、フォントサイズが「下から3番目」に合わせてレイアウトされています。その設定に変更してからiPadを縦向きにしてお読みください。Mac版 iBooksで読まれる場合には、表示を「単一ページ」に設定してください。

一度登録してしまえば、本文中に設定されているハイパーリンク経由でアプリの指定したデモを起動することが可能です。アプリを起動するハイパーリンクは先頭に「★」が付いています。その箇所のタップでアプリが起動され、リンク先に記載されているデモ内容が実行されます。アプリからはツールバーの「ビューアへ」ボタンをタップすることでiBooksへ戻ることが出来ます。

サンプルソースコードプロジェクトの開発環境はXcode 5です。ビルドして実機にインストールする場合には、Xcodeのプロジェクトターゲット(TARGETS)のGeneralで表示される「Build Identifier」と、Build Settingsの「Code Signing Identity」を正しく再設定してください。アプリの起動対象はiOS 6.0以上であり、iOS 7.0でも問題なく動作させることができます。

サンプルアプリにおけるデモの種類

(1)UIKitによる画像描画
(2)Quartz 2D 反転描画
(3)Quartz 2D 正常描画
(4)画像ファイル読み込み
(5)JPEGファイル書き出し
(6)画像の詳細情報を得る
(7)画像をタイル描画する
(8)ブレンドモードの変更
(9)マスク付き画像の表示
(10)2つの多角形を描画
(11)破線で多角形を描画
(12)円と楕円と円弧描画
(13)図形のクリッピング
(14)ベジエ曲線を描画する
(15)UIKitでのパス図形
(16)星形図形タップテスト
(17)UIKit オフスクリーン
(18)オフスクリーンへ描画
(19)レイヤ 枠と影の描画
(20)レイヤ パス図形描画
(21)レイヤ グラデーション
(22)ペイント処理最適化
(23)UIKitでのテキスト
(24)Quartz 2D テキスト
(25)CoreText テキスト
(26)多色矩形パタン描画
(27)単色星形パタン描画
(28)矩形に赤い影を描画
(29)3つの矩形に影描画
(30)簡易グラデーション
(31)細密グラデーション
(32)PDFファイルの描画
(33)PDFファイルの保存
(34)UIKitでのPDF保存
(35)AirPrint経由の印刷

サンプルアプリのソースコードについて

本サンプルソースコードの開発環境はXcode 4.6以上、アプリ動作環境はiOS 6以上となります。Xcodeプロジェクトに含まれる各クラスの概要は次の通りです。

MasterViewController」デモ一覧を表示しているビューコントローラ
DetailViewController」起動画面を表示するビューコントローラ
QuartzViewController」Quartz 2Dよる描画デモを行うビューコントローラ
PaintViewController」タップによるペイント描画デモ用のビューコントローラ
PrintViewController」 AirPrint経由で行う印刷デモ用のビューコントローラ
AboutViewController」本アプリのアバウトを表示するビューコントローラ
SetupViewController」 アプリの使い方の表示とURLスキームの変更を行う
QuartzView」drawRect:メソッドでデモ描画を行なうUIViewのサブクラス
PaintView」 タップによるペイント描画デモで使うUIViewのサブクラス
PaintLayer」タップによるペイント描画デモで使うCALayerのサブクラス
ImagePrintPageRenderer」印刷デモで用いるAirPrint用レンダラークラス

Quartz 2DUIKitを利用した2D描画のほとんどはQuartzViewControllerクラスに配置されているQuartzViewクラスのdrawRect:メソッドで実行されています。デモ番号を参照し、そこに記述されているcase文をたどれば、目的のデモを実行しているソースコードにたどり着きます。例外として、CALayerを用いた描画(デモ19、20、21)については、QuartzViewControllerで処理されていますのでご注意ください。第10章「描画の最適化を行う」における高速化を試したペン描画(デモ22)についてはPaintViewControllerクラスに、第15章「PDF操作とビューの印刷(AirPrint)」の印刷(デモ35)に関してはPrintViewControllerクラスに実装されています。

実際のサンプルソースコードは、 本書籍内で紹介されているソースコードと若干異なる場合がありますのでご了承ください(デモ処理に特化するため)。デモのサンプルソースコードには、本書籍での解説のみで、実際には使用していないルーチンやメソッドなどが幾つか記述されています。参考にしてみてください。

【ご注意】サンプルソースコードの使用権利はフリーです。使えるようであれば、ご自身のソースファイルへコピー&ペースしてご利用ください。ただし、その結果として発生した事象に対しては責任は負いかねますのでご了承ください。