ベジェ曲線のパスによって図形を描く

ゆがんだ砂時計でパスの扱いを学ぶ

2017年01月30日 15時59分更新

文● 柴田文彦　編集●吉田ヒロ

　前回から、iOSアプリの最も基本的な要素であるビュー（UIView）にアクセスできるようになり、そこにグラフィックを描き始めています。そこでは、ビューに自由にグラフィックを描くための1つの方法として、UIViewクラスに含まれるdrawメソッドを独自に置き換える手法を使いました。今回もそれをさらに探求していきましょう。

　前回は、まず長方形を定義し、その長方形の領域の中にぴったり収まる楕円を描くという、かなり基本的な方法を示しました。その際には、UIBezierPathというベジェ曲線を表すパスを使いました。しかし、元が単純な長方形だけに、ベジェ曲線とか、パスを扱っているという印象は薄かったでしょう。長方形を基にしてパスを描く方法だけでは、ベジェ曲線という自由度の高い描画方法のメリットもほとんどないと言えます。

　今回は、このベジェ曲線のパスを自由に使う手法を追求してみます。実はこのiOSのグラフィック機能は、PostScriptやPDFの内部で使われているのと基本的に同じものなのです。歴史も古く、いわば伝統的な技術ですが、高精度な図形を手軽に描くことができる、今でもなくてはならない描画方法です。

UIBezierPathのドキュメントを確認する

　UIViewや、そのdrawメソッドという、iOSネイティブな方法を使えるようになったということは、iOSのアプリプログラミングに関する情報が、そのままこのSwift Playgroundsにも適用できることを意味しています。前々回まで使っていたSwift Playgrounds固有の環境では得られない大きなメリットです。

　さっそくAppleのデベロッパーサイトにあるAPI Referenceのページを開いて、UIBezierPathに関するドキュメントを探してみましょう。URLがわからなくても、「swift uibezierpath reference」などで検索すればすぐに見つかるはずです。

AppleのデベロッパーサイトにあるUIBezierPathのリファレンス情報です。今回は、この内容を少しずつ確かめていきます

　このページは、用例などはなく、コンパクトにまとめられたリファレンスですが、ざっと目を通すと、UIBezierPathでできることがだいたいわかります。それによると、パスの作り方には、大別して2種類あります。1つは、前回も使った長方形を基準にして、その内側に収まるパスを作るもの。もう1つは、座標を順に指定して自由なパスを作るものです。そして、それぞれの中にまた何種類もの方法が用意されています。

　今回はまず、長方形を使った方法の中で、前回とは違った方法を示し、その後、自由な形状のパスを作る方法に踏み込みます。

ツイートする

カテゴリートップへ