頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


タッチされた点から滑らかな曲線を得る

ノート系のアプリとかでiPhone/iPadのスクリーンをツーっとなぞって線を描く、なんてよくあるじゃない。
あれ、普通にUIResponderの

touchesBegan:withEvent:
touchesMoved:withEvent:

辺りを使ってタッチされた点を拾って、その点を直線でつなぐだけだと結構カクカクしちゃうのよ。
この線を滑らかな曲線に見せるためにいろいろなテクニックというかアルゴリズムというかあるみたいでさ。

よし、俺もちょっくら考えてみるかと思って二次のベジェ曲線を使って滑らかな線になるようにしてみたんだけどさ、、、

ベジェ曲線を使った結果1

↑ 余計に不自然になったりしてね。
赤い線上の青い点が拾った点、赤い線はそれをつないだだけ。緑の線は小さい点がベジェ曲線の制御点。補正した曲線は同時に右にずらして表示させてる。
点を拾った時点で前の点と前の制御点から新しい制御点を決めてるんだけど、どうも制御点の位置がおかしい。
こりゃもっと前の点なんかも使って制御点を全て書き換えるとか必要なのかな?とか昼ご飯食べながらどうしたものかといろいろ考えてたんだけど、ふと前に関連する記事を読んだことあったんじゃないかな?って思い出してさ。
もしかしたらとEvernoteを調べたらブックマークしてたじゃないか!

なめらかな線を描く | Cocoaの日々情報局

うーん?最初コードを読んだ時何を意味してるのかよくわからなかったんだけど試しにやってみると、、、

ベジェ曲線を使った結果2

↑おおお!すごいじゃない!
一番右にずらしたのが新しい方法のね。
拾った点は必ず通らせるもんだと俺は考えていたんだけど、この方法はタッチで拾った点同士の中間点を通らせて、拾った点を制御点にして二次のベジェ曲線を描いてる。しかもタッチされた点を間引くこともなく、取得した時点でそこまでのラインがいとも簡単に決定するんだ。コードはシンプルでラインも十分キレイ。これ最初に考えた人、天才だな!

<< UIImageを切り抜くのにはまった  TopPage  顔認識 OpenCV対CIDetector >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/886-38d46d8d




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad