なぜに前回、実験的に文章を斜めに縦長文字で表示してみたかというと、最終的な難易度指定GUIを以下のようなものにしたいからなわけですわ。
![テン・シー・シー-fig.1](https://stat.ameba.jp/user_images/ce/eb/10144539913.jpg?caw=800)
頭蓋骨の上の部分を指で触ることで、黄色い矢印が指の触れている方向に向く。
矢印が指す数字は、他の数字より大きめに表示する。
こういうことをしたい場合、文字の拡大、回転機能が必須なわけで、できるんかな~と、実験的に試したわけです。
で、使った機能が、iPhoneアプリ開発、その(62)からチラチラ登場しているCTM(Current Transformation Matrix)なわけでして、今回以下の3つを利用して傾いて縦に伸びた文字を表示しています。
使い方はドキュメントQuartz 2D Programming Guide>Transformsってところに詳しく記述されてて、よ~するに
Quartz描画はアフィン変換が入ってからモニタに表示される。
てことなんですが、線形代数学の成績が良かった人なら「あ、そう」ですむ話だけどね~。さっぱりですわ。ググっても下のwikiのリンクみたいに読めば読むほどわからなくなったわ~、どあほう。
アフィン写像
と、とりあえず
座標に3x3の行列を適用することで、別の座標に変換される
としときましょう。なんで変換できるのかは謎ということで、ひとつ。べ、別に、頭が悪いからなわけじゃないんだからねっ!知らなくても使えるから調べないだけっ!あ、あんたのことなんかなんとも思ってないんだから!!
で、現在(Current)のGraphics Contextsに、この3x3の変換用行列(Transformation Matrix)を設定する機能として、上のCGContextTranslateCTM(平行移動)、CGContextRotateCTM(回転移動)、CGContextScaleCTM(拡大、縮小)があるわけです。
iPhoneアプリ開発、その(62)で書いた「CTMのY軸を反転」させるには
とすればいいわけね。UIImageはdrawInRectメソッドの中でこいつをやってると思われ。
前回は
として表示する文字列を変換してます。
最初
という順序
![テン・シー・シー-fig.2](https://stat.ameba.jp/user_images/c6/2e/10144562436.jpg?caw=800)
で変形させるつもりで
てやったら、こんなふうに表示されました。
![テン・シー・シー-fig.3](https://stat.ameba.jp/user_images/ee/71/10144562838.jpg?caw=800)
どうも
という順序で実行されたっぽい。
![テン・シー・シー-fig.4](https://stat.ameba.jp/user_images/50/31/10144565893.jpg?caw=800)
ここらへんの順序が重要(回転や拡大は原点を中心におこなうから、最初に平行移動させちゃうと、思わぬ形状に変形されてしまうわけやね)という注意はドキュメントQuartz 2D Programming Guide>Transforms>Modifying the Current Transformation Matrixに書かれてるっす。
というか、順序が大事だから拡大→回転→移動って書いたんだけど...
どうも書いた順と逆に実行されるみたいっす。
次回、もうちょっと調べてみましょう。
んじゃ、また。
![テン・シー・シー-fig.1](https://stat.ameba.jp/user_images/ce/eb/10144539913.jpg?caw=800)
頭蓋骨の上の部分を指で触ることで、黄色い矢印が指の触れている方向に向く。
矢印が指す数字は、他の数字より大きめに表示する。
こういうことをしたい場合、文字の拡大、回転機能が必須なわけで、できるんかな~と、実験的に試したわけです。
で、使った機能が、iPhoneアプリ開発、その(62)からチラチラ登場しているCTM(Current Transformation Matrix)なわけでして、今回以下の3つを利用して傾いて縦に伸びた文字を表示しています。
CGContextTranslateCTM
CGContextRotateCTM
CGContextScaleCTM
使い方はドキュメントQuartz 2D Programming Guide>Transformsってところに詳しく記述されてて、よ~するに
Quartz描画はアフィン変換が入ってからモニタに表示される。
てことなんですが、線形代数学の成績が良かった人なら「あ、そう」ですむ話だけどね~。さっぱりですわ。ググっても下のwikiのリンクみたいに読めば読むほどわからなくなったわ~、どあほう。
アフィン写像
と、とりあえず
座標に3x3の行列を適用することで、別の座標に変換される
としときましょう。なんで変換できるのかは謎ということで、ひとつ。べ、別に、頭が悪いからなわけじゃないんだからねっ!知らなくても使えるから調べないだけっ!あ、あんたのことなんかなんとも思ってないんだから!!
で、現在(Current)のGraphics Contextsに、この3x3の変換用行列(Transformation Matrix)を設定する機能として、上のCGContextTranslateCTM(平行移動)、CGContextRotateCTM(回転移動)、CGContextScaleCTM(拡大、縮小)があるわけです。
iPhoneアプリ開発、その(62)で書いた「CTMのY軸を反転」させるには
CGContextTranslateCTM(context, 0,self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
とすればいいわけね。UIImageはdrawInRectメソッドの中でこいつをやってると思われ。
前回は
double angle = 15;
CGContextTranslateCTM(context, 20,100);
CGContextRotateCTM(context, 2*3.14*angle/360);
CGContextScaleCTM(context, 1.0, 3.0);
として表示する文字列を変換してます。
最初
縦2倍にする
15度回転する
原点を20、100平行移動する
という順序
![テン・シー・シー-fig.2](https://stat.ameba.jp/user_images/c6/2e/10144562436.jpg?caw=800)
で変形させるつもりで
double angle = 15;
CGContextScaleCTM(context, 1.0, 3.0);
CGContextRotateCTM(context, 2*3.14*angle/360);
CGContextTranslateCTM(context, 20,100);
てやったら、こんなふうに表示されました。
![テン・シー・シー-fig.3](https://stat.ameba.jp/user_images/ee/71/10144562838.jpg?caw=800)
どうも
原点を20、100平行移動する
15度回転する
縦2倍にする
という順序で実行されたっぽい。
![テン・シー・シー-fig.4](https://stat.ameba.jp/user_images/50/31/10144565893.jpg?caw=800)
ここらへんの順序が重要(回転や拡大は原点を中心におこなうから、最初に平行移動させちゃうと、思わぬ形状に変形されてしまうわけやね)という注意はドキュメントQuartz 2D Programming Guide>Transforms>Modifying the Current Transformation Matrixに書かれてるっす。
というか、順序が大事だから拡大→回転→移動って書いたんだけど...
どうも書いた順と逆に実行されるみたいっす。
次回、もうちょっと調べてみましょう。
んじゃ、また。