Core Graphicsを学ぶ

何となく CoreGraphics　辺りを書きたい気分に。
これを使って何かをしようと思ったことが無いので、個人的にも勉強しながら書いていくというスタンスです。


Core Graphicsは、UIImageとかよりもちょっとだけ低レベルなグラフィックフレームワークだとか。
Cocoa Touchよりもハードウェアよりに位置するので、実行速度も多分速くなるし自由度も増す。
Core何とかと名前がついているAPIは大抵C言語で提供されているんだけれど、Core Graphicsもそうらしい。
ってことは、呼び出しが若干煩雑になるってこと。


とりあえず、プロジェクトに　CoreGraphics.frameworkを追加してみる。


１、グラフィックスコンテキスト
書籍なんかでは描画する対象を表すものだとか何とか書かれている。まあ、良くわからんが　Core Graphicsを使った描画では、最初にグラフィックスコンテキストを取得しないといけないってことだけは確かだ。

　CGContextRef UIGraphicsGetCurrentContext();
　

とりあえず実践。
すべての描画はdrawRect: メソッドの中に記述するか、この中から呼ぶメソッドに記述しないと動かないらしいので、Viewを一丁つくってdrawRectにメソッドを書いておく。

これ、コメントを削除したアップルさんのサンプルと一緒w
引数でグラフィックコンテキストも作って渡しちゃう。

-(void)drawRect:(CGRect)rect
{
[self drawInContext:UIGraphicsGetCurrentContext()];
}

呼び出されるメソッドの中身はこれ。
なにやってるかはコメントに記載しました。
-(void)drawInContext:(CGContextRef)context
{
CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0);//線の色。引数はcontext, R,G,B,アルファ。

CGContextMoveToPoint(context, 20.0, 50.0);//線の始点
CGContextAddLineToPoint(context, 300.0, 50.0);//線の終点から線を生成
CGContextStrokePath(context);//線を引く
}

はい、びしっと線が引けたかと。

じゃあ、これを使って折れ線グラフ的な線も引けるんじゃないかと言うのが人情ですね。
上のやり方でちまちまやってもいいのですが、まとめてやる方法があります。

-(void)drawInContext:(CGContextRef)context
{
CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
CGPoint lines[] =
{
CGPointMake(10.0, 90.0),
CGPointMake(70.0, 60.0),
CGPointMake(130.0, 100.0),
CGPointMake(190.0, 70.0),
CGPointMake(250.0, 90.0),
CGPointMake(310.0, 50.0)
};

CGContextAddLines(context, lines, 6);
CGContextStrokePath(context);

}

これで、真っ赤なガタガタ線が引けたかと思います。

最初にCの配列 lines　を生成してCGPointをぶっこみにいってます。
CGContextAddLines関数。末尾に”s”が付いてるので複数形ですね。第一引数はcontext、次に接点を保つ配列が第二引数。最後の引数は接点の数です。　
　この最後の引数の「６」ですが、実際のプログラムでは動的に入れたいというケースがほとんどなので、ここを
　sizeof (lines)/ sizeof( lines[0]) とするとスマートです。
sizeof はメモリのサイズを返すので、配列全体のサイズを最初の一個目のサイズで割ると、CGPointひとつひとつで確保しているメモリのサイズは同じなので、配列の数　＝　接点の数が算出できるというわけです。obj-Cみたいに[ Array count ] とかできないところがもどかしいですね。


＜その他＞

太さの設定
CGContextSetLineWidth(context, x);
x は?pxということ。

たばこと丸と四角

・線の端っこの形の設定。
CGContextSetLineCap関数で設定。まさに名前の通りw
　ラインキャップを設定するんですね。キャップは両端にかぶせます。
　
　kCGLineCapButt = 両切りタバコ状態
　kCGLineCapRound = 丸いキャップをするんですね。
　kCGLineCapSquare　= 四角いキャップ。
　
　
　CGContextSetLineCap = kCGLineCapRound;
　
　Buttという単語はアメリカ英語だとタバコって意味もあるらしくて、灰皿を　Butt tray とかとも言うらしい。でも、アメリカ人以外には通じないらしいw
　
　
　
ジョイントの方法

CGContextSetLineJoin = kCGLineJoinMiter;

miter joint（マイタージョイント）っていうのは、斜めに切った角材を張り合わせた感じの事をいうらしい。
ふむふむ。

kCGLineJoinMiter マイターに
kCGLineJoinRound　丸くつなぐ
kCGLineJoinBevel　角をばつんと落とす。