SwiftでCoreGraphics画像作成（基本）【メモ】

SwiftでCoreGraphicsによる画像を作成。

CoreGraphicsは、UIImageViewやUIImageなどの既存の画像を使った処理ではなく、オリジナルの図形などを描画したいときに利用することができる、フレームワークです。

UIImageなどでは、xxx.jpgなどのファイルを画像を表示したり、拡大、回転などできますが、これらの画像を合成したり、切り抜いたりする際に活用できると便利です。

直接UIViewに画像書き込んだり、本来はいろいろな使い方があるのですが、ここではCoreGraphicsで描画した画像を、UIImageとしてアプリから利用するという考え方だけに絞って確認します。

CoreGraphicsによる描画の基本手順

ここでは、UIImageの変数にCoreGraphicsで描画した画像を代入するまでの手順を考えます。

1. グラフィックスコンテキストの作成
2. 描画の設定（色やサイズなど）
3. 描画する図形情報の作成（パスを組み合わせて図形を作る）
4. 図形を描画する（作成したパスを元に図形を描画）
5. グラフィックコンテキスト内の情報をUIImageとして取得

基本的にこのような流れで描画を行います。図形が複雑になる場合には、3,4の手順が増えるということになります。

CoreGraphicsの描画の基本コード

以下のように直線を引いた画像を作成するためのコードは以下の様なものです。

swift

//1.グラフィックスコンテキストをサイズ指定
UIGraphicsBeginImageContext(CGSizeMake(300, 300))
//1.グラフィックスコンテキストを取得
let context:CGContextRef = UIGraphicsGetCurrentContext()

//2.描画用の設定（図形の線の太さを設定）
CGContextSetLineWidth(context, 2.0)
//2.描画用の設定（図形の線の色を設定）
let color:CGColorRef = UIColor.redColor().CGColor
CGContextSetStrokeColorWithColor(context, color)

//3.パスを作成
CGContextMoveToPoint(context, 50, 50)
CGContextAddLineToPoint(context, 250, 250)

//4.パスを閉じる
CGContextClosePath(context)
//4.パスで指定した図形を描画
CGContextStrokePath(context)

//5.UIImageの取得
let img:CGImageRef = CGBitmapContextCreateImage(context)
self.imageView.image = UIImage(CGImage: img)

コードの補足説明

グラフィックスコンテキストの作成

swift

//1.グラフィックスコンテキストをサイズ指定
UIGraphicsBeginImageContext(CGSizeMake(300, 300))
//1.グラフィックスコンテキストを取得
let context:CGContextRef = UIGraphicsGetCurrentContext()

この部分は、メモリ上に作成するグラフィックコンテキストのサイズ指定をしています。
CoreGraphicsで使用する多くの関数は、CGContextRef （グラフィックコンテキストへの参照）という変数が必要になります。今回は画面外の見えないメモリ上に新たな領域を作成して描画をしていますが、drawInRectメソッドの中などで描画をする場合には、サイズ指定は必要がないようです。

今回のコードでは、最終的に、ここで作成したサイズ（300,300）のUIImageが作成されます。

---

描画の設定（色やサイズなど）

swift

//2.描画用の設定（図形の線の太さを設定）
CGContextSetLineWidth(context, 2.0)
//2.描画用の設定（図形の線の色を設定）
let color:CGColorRef = UIColor.redColor().CGColor
CGContextSetStrokeColorWithColor(context, color)

この部分では、図形の線の太さと色を設定しています。色については、UIViewで使用しているUIColorをそのまま使うことができず、CGColorという色体系を使用する必要があります。UIColorにはCGColorの値を取り出すプロパティが用意されているため、基本的には以下の様な形式で、CGColorを取得することができます。

swift

UIColor.redColor().CGColor    //... CGColorのredColorとなる
UIColor.clearColor().CGColor  //... CGColorのclearColor（透過色）となる

//RGB値を組み合わせて色を指定
UIColor(red: 0.9, green: 0.1, blue: 0.1, alpha: 1).CGColor

---

図形の作成

swift

//3.パスを作成
CGContextMoveToPoint(context, 50, 50)
CGContextAddLineToPoint(context, 250, 250)

直線を引く場合には、座標を順に指定します。CGContextMoveToPointで始点を決めて、CGContextAddLineToPointを指定するごとに、連続してパスが設定されていきます。
パスを引くための関数としては、直線だけでなく以下のような関数が用意されています。

CGContextAddLineToPoint ... 直線を引く
CGContextAddRect ... 矩形を描く（正方形〜長方形）
CGContextAddEllipseInRect ... 円を描く（矩形に内接する円を描く）
CGContextAddCurveToPoint ... 曲線を引く

また、UIBezierPathを使用することで、ベジェ曲線なども表示させることができます。

【参考：ベジェ曲線（UIBezierPath）】
http://atmarkplant.com/uibezierpath/

---

図形を描画

swift

//4.パスを閉じる
CGContextClosePath(context)
//4.パスで指定した図形を描画
CGContextStrokePath(context)

図形を描画する際には、作成してきたパスの情報を一旦閉じて終了します。その後、パスの情報を元に描画を行います。また、図形の描画には2種類の方法があります。

CGContextStrokePath ... 線を引く（例では線を引いているだけ）
CGContextFillPath ... パスで囲われた範囲を塗りつぶす

CGContextFillPathによる塗りつぶしを行うためには、色の設定の際に、CGContextSetFillColorWithColor関数で塗りつぶしの色を指定しておく必要があります。

---

UIImageとして取得

swift

//5.UIImageの取得
let img:CGImageRef = CGBitmapContextCreateImage(context)
self.imageView.image = UIImage(CGImage: img)

最後に、グラフィックコンテキスト内の画像情報を元に、UIImageオブジェクトを作成し、画面上に表示などを行います。