UIBezierPathで曲線を描画してみた

はじめに

01

iOSで点と点を結んだ曲線を描く事がたまにあります、今回はUIBezierPathを使った、曲線を描画する方法紹介します。

UIBezierPathは描画用のクラスです、下記サイトの画像を見ると、なんとなーくわかると思います。IllustratorやPhoto shopのパスを使ったことある人はわかりやすいかもしれませんが、あれをプログラムで定義でき、直線や曲線、円を描画できます。

Drawing Shapes Using Bézier Paths – Apple Developer

Viewを用意

描画対象のViewを用意します、いつもの様にUIViewを継承したクラスを作成します。※今回は「DrawCurveView」としました。

まずはinitWithFrameをオーバーライドして、背景色を透明にしてます。

 そしてViewControllerにaddSubViewします。

 

点を描画

適当に点を置きます、CGPointを6つ作って配列に入れつつ、drawRectにてその点を描画します。

 02

直線を描画

次に点と点を直線で結んでみます。

03

いよいよ曲線を描画 

色々遠回りをしつつ、やっと曲線の描画です。

 これまでに比べて長くなりました、わかりにくいですが結果は下記になります。

04

 これで点と直線を描画するメソッドをコメントアウトすれば、一番最初の画像のように表示されます。

線に沿ってアニメーションしてみる

せっかく曲線書いたので、UIBezierPathの図形描画だけじゃない所を紹介します。なんと書いたパスに沿ってViewをアニメーションさせることができます。

まず、アニメーションさせるUIImageViewと、曲線のパスを保持するための配列を用意します。

※ちなみに画像は 下記の記事でも使った、当ブログのキャラクターを使用します。

海外で人気のフレームワーク”libGDX”を使って、Androidでアニメーション作ってみた

path配列を保持するため、曲線を書くメソッドに配列へ追加するコードを追加します。

そしてアニメーションを開始するメソッドを記述します。

このメソッドをヘッダファイルにも記述して、ViewControllerのviewDidAppearで呼びます。

 結果として下記のように表示されます。一応gifなのですが、動いてなかったらクリックしてもらえば多分動きます。

bezier_anim1

 最後に

 なんだかんだで2014年はこれを使わない仕事のほうが少なかったです、覚えてみると楽しい上に応用が色々効くので、ぜひ触ってみてください。 

●この記事を書いた人