[iPhone] iOSアプリに図形を描画するにはUIBezierPathを使う

iOSアプリに◯や三角などの図形を描きたい事は多いです。そんな時はUIBezierPathを使います。iOSでのグラフィックスの扱い方について見てみましょう。

bezierpath_1

Swift 3.0
Xcode 8.0

 

sponsored link

UIView クラスを作成して直線を描く

 
bezier とはベジェ(Bezier)曲線からきているのでしょうか
iOS UIBezierPath Class Reference

 
まず押さえるところとして。UIViewからのクラスを作り、それを UIViewController から呼び出して使います。
 
ナビゲーションエリアでプロジェクトを右クリックして
新しくクラスを作成します
 
スクリーンショット 2014-11-19 17.39.46
 
「iOS」->「Source」->「Cocoa Touch class」
 
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-19-22-00-37
 
Subclass of には UIView を指定します。
ここでは TestDraw というクラスを追加
 
スクリーンショット 2014-11-19 17.44.08
 
プロジェクトのフォルダ内に保存先を指定して「Create」します
 
TestDraw.swift が生成されます

 
override func drawRect(_ rect: CGRect){ }
 
がコメントアウトされているので、ここにUIBezierPath を使ってコードを記述します。

  1. UIBezierPath のインスタンス生成
  2. 起点の設定
  3. 帰着点をセット
  4. 色の設定
  5. ライン幅
  6. 描画セット

 
TestDraw.swift

 
TestDraw を呼び出す ViewController 側は描画するフレームサイズを指定して
インスタンスを生成しview に追加します。
 
self.view.bounds.width
self.view.bounds.height

としてスクリーンの横幅と縦幅を取得
 
ViewController.swift

 
描画領域はデフォルトでは黒くなっています
 
iOS Simulator Screen Shot 2014.11.21 16.57.06
 

図形を描く

 
その他にも図形を描画するメソッドがあります

  • 三角形
  • 楕円(円も含む)
  • 矩形
  • 角が丸い矩形
  • 円弧

以下コードです
 
TestDraw.swift

 
「General」で「Landscape Right」に設定してLandscape にします。

%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-09-19-22-25-37
結果はこうなります。
 
iOS Simulator Screen Shot 2014.11.21 18.02.12
 

Objective-C のケースは こちら です