Phonto 4.5.0: 文字を立体的に表現する機能(3D)と文字の一部を削除する機能(消しゴム)を追加しました。

Phontoさん(@phontograph)が投稿した写真 - 12月 12, 2014 at 9:03午前 PST

Phontoの更新状況を当ブログで報告するのはなんと1年半ぶりになりますが、ちょくちょくアプリの更新の方はさせていただいております。
おかげさまでiOS版とAndroid版をあわせて1500万ダウンロードを超えました。どうもありがとうございます。

今回のアップデートで「文字スタイル」ツール (Text Style Kit)というアドオンを追加しました。内容はタイトル通り、文字を立体的に表現する機能(3D)と文字の一部を削除する機能(消しゴム)です。今後面白いアイデアがあればこのアドオンの機能として追加していく予定です。

ひさしぶりの更新なのに宣伝だけでは面白くないので、3Dに関して苦労した点を簡単にメモしておきます。


当初はCALaerのCATransform3D transformとうプロパティを活用して3D機能を実現する予定だった。

Viewの表示だけならCATransform3Dのm34パラメータをいじるだけで簡単に実現可能。

CALayerの renderInContext というメソッド使えば簡単に画像として出力できそう。

ただし、renderInContextでは3D transformsはレンダリングされないという注意書きが！

しょうがないので描画の実装はCore ImageのCIPerspectiveTransformというフィルターを使うことにする。

頂点を計算するためにAGGeometryKit というオープンソースのライブラリを見てみる。確かに矩形(Bounding Box)と頂点の計算や画像への書き出し等をサポートしているものの、どうもAGGeometryKitが想定する頂点とCIPerspectiveTransformで指定する頂点の概念が一致していない模様 。微妙にずれる。(この辺り不明)。

基本的に4つの頂点を決定するだけなので、ライブラリを活用せずに自分でコードを書いてみることに。

リアルタイムで編集できるように、既存のUIViewの上にGLKView(GLKit) を仕込むことにする。
Core TextでCGContextRefに描画した文字を画像化(UIImage)してさらにそれをCIImage化したものを GLKViewDelegateのglkView:drawInRectで描画。
この程度の処理ならiPhone 4Sでもヌルヌル。