SwiftでのdrawRect()

UIViewのdrawRec()メソッド内で線を描いたり円を描いたりするやり方について。

CGContextなんとかという関数を用いる方法が広く紹介されているが、実はUIBezierPathというクラスもある。これはCGContextなんとかを機能的にラッパーしたクラス。Appleの資料によるとこちらの方がおすすめらしいのでこれを中心に紹介していく。Bezierというとややこしい数式を用いた描画というイメージがあって名前で少し敬遠してしまうが、線を引いたり丸を描いたりといった単純な描画でもこのクラスをメインにするといい。UIPathのようなシンプルな名前にしておけばもっと人気（？）が出たかもしれない。

描くときの大まかな流れは
1　線の太さや使用する色を指定
2　パス（線要素）を必要なだけ足していく。
3　描画指令を出す
となる。

UIBezierPathを使った描画

//色の設定
UIColor.redColor().setFill()
UIColor.blueColor().setStroke()
UIColorに色設定メソッドがあります。UIBezierPathというのはPathに関するものなので色は専門外なんでしょう。

でここからUIBezierPathのメソッドです。

//空インスタンス作成
let line = UIBezierPath()

//線の太さ
line.lineWidth = 2

//開始点
line.moveToPoint(CGPointMake(10, 10))

//追加点
line.addLineToPoint(CGPointMake(20,20))

//パスを描く
line.stroke()

//パスを閉じる
line.closePath()

//円や楕円
let daen = UIBezierPath(ovalInRect: CGRectMake(100, 100, 100, 100))

//四角
let shikaku = UIBezierPath(rect: CGRectMake(100, 100, 100, 100))

//中を塗る
daen.fill()
shikaku.fill()

//角が丸い四角
let kadomaruSHikaku = UIBezierPath(roundedRect: CGRectMake(100, 100, 100, 100), cornerRadius: 10)

//弧
let arc = UIBezierPath(arcCenter: CGPoint(x:100, y:100), radius: 50, startAngle: 0, endAngle: CGFloat(M_PI) * 1.0 / 2.0, clockwise: true)

//ベジエぽい曲線
let bez = UIBezierPath()
bez.moveToPoint(CGPointMake(0, 0))
bez.addCurveToPoint(CGPoint(x: 100.0, y: 0.0), controlPoint1: CGPoint(x: 100.0, y: 100.0), controlPoint2: CGPoint(x: 200.0, y: 100.0))
bez.addQuadCurveToPoint(CGPoint(x: 200.0, y: 200.0), controlPoint: CGPoint(x: 300.0, y: 100.0))

以上UIBezierPathで使われること多いものです。角が丸い四角があるのがうれしい。
drawRect(rect: CGRect)からサブクラスを呼んだとき、サブクラス内でも同じように書ける。

CGContextなんとか

//コンテキスト取得
let cgContext = UIGraphicsGetCurrentContext()

//ラインの太さ
CGContextSetLineWidth(cgContext, 2.0)

//色の設定
CGContextSetStrokeColorWithColor(cgContext, UIColor.redColor().CGColor)
CGContextSetFillColorWithColor(cgContext, UIColor.blueColor().CGColor)

//円、楕円
CGContextFillEllipseInRect(cgContext, CGRect(x: 0.0, y: 10.0, width: 20.0, height: 20.0))
CGContextStrokeEllipseInRect(cgContext, CGRect(x: 0.0, y: 10.0, width: 20.0, height: 20.0))

//四角
CGContextFillRect(cgContext, CGRect(x: 0.0, y: 40.0, width: 20.0, height: 20.0))
CGContextStrokeRect(cgContext, CGRect(x: 0.0, y: 40.0, width: 20.0, height: 20.0))

//描画
CGContextFillPath(cgContext)
CGContextStrokePath(cgContext)