iPhoneで図形を描く前準備(GraphicsContext)

iPhone

こんにちは、@yoheiMuneです。
今日はiPhoneのQuartz2Dで図形を描く前準備となる、GraphicsContextの作り方を学んだので、ブログに残しておきたいと思います。
いつもに増してニッチな内容ですね。Quartz2Dについては、"iPhoneで図形を描く。Quartz 2Dの初歩"もご参照ください。


GraphicsContextとは

GraphicsContextはQuartz2Dで図形を描く為に利用するものです。CGContextRefという型で参照します。線を引いたり、四角を書いたりする時の関数の引数に毎回指定する必要がある、重要なオブジェクトです。


CGContextRefの作り方

作り方サンプルソースコードです。

- (CGContextRef)MyCreateBitmapContext:(int)pixelsWidth height:(int)pixelsHeight {
  CGContextRef	myContext = NULL;
  CGColorSpaceRef	colorSpace; // 色の指定方法を決めるもの。RGBやCMYKなどあり。
  void *			bitmapData; // データを保持するメモリエリア。
  int				bitmapByteCount;
  int				bitmapBytesPerRow;
	
  bitmapBytesPerRow	= pixelsWidth * 4;
  bitmapByteCount		= bitmapBytesPerRow * pixelsHeight;
  colorSpace			= CGColorSpaceCreateDeviceRGB();
  bitmapData			= malloc(bitmapByteCount);
  if (bitmapData == NULL) {
    NSLog(@"必要なメモリ領域を確保出来ませんでした。残念無念。");
    return NULL;
  }

  // ここがContextを生成している部分。いろんな引数があります。
  myContext = CGBitmapContextCreate(
    bitmapData,  // 利用するメモリ領域
    pixelsWidth,   // 作成するContextの横幅
    pixelsHeight,  // 作成するContextの縦幅
    8, // bits per component
    bitmapBytesPerRow, // 1行あたりのバイト数
    colorSpace,  // 色の指定方法
    kCGImageAlphaPremultipliedLast // 透明度の指定方法
  );

  if (myContext == NULL) {
    free(bitmapData);
    NSLog(@"Context作成に失敗しました。あーあ。");
    return NULL;
  }
	
  CGColorSpaceRelease(colorSpace);

  return myContext;
}

CGBitmapContextCreateという関数でContextを作成します。引数がたくさんあり色々な情報を設定出来ます。



GraphicsContextを利用する例

上で作成したContextを利用した例も記載しておきたいと思います。こんな感じで、使います。例では四角形を2つ作成します。

- (void)drawShapes {
  self.context = [self MyCreateBitmapContext:self.bounds.size.width height:self.bounds.size.height];
	
  CGRect myRect1 = CGRectMake(0, 0, 200, 100);
  CGRect myRect2 = CGRectMake(0, 0, 100, 200);

  // draw
  CGContextSetRGBFillColor(context, 1, 0, 0, 0.7);
  CGContextFillRect(context, myRect1);
  CGContextSetRGBFillColor(context, 0, 1, 0, 0.7);
  CGContextFillRect(context, myRect2);
  [self setNeedsDisplay];
}

- (void)drawRect:(CGRect)rect {
  CGImageRef image = CGBitmapContextCreateImage(context);
  CGContextRef currentContext = UIGraphicsGetCurrentContext();
  CGContextDrawImage(currentContext, CGRectMake(0, 0, 200, 200), image);
}

CGContextSetRGBFillColorで赤、緑、青、透明度を0.0〜1.0の値で指定します。
CGContextFillRectは指定された範囲(CGRect)に四角形を描画します。
他にもCGContextから始まる関数がいっぱいあり、用途に合わせた描画が出来るようです。
[self setNeedsDisplay]を実行し、図形をUIView上に描画するように指示を出します。
drawRect:メソッドでは、四角形2つが描画されたイメージ(CGImageRef)を取得して、描画します。ここではUIGraphicsのContextを利用するんだよなぁ〜。他にもやり方ありそうですが、今はこれしか分からないzzz。残念。



最後に

Quartz2DのGraphicsContextが作成出来ればあとは、いろんな図形を描画してみるのみ(*´∇｀*)色々な図形を使えるようになれれば良いなぁ。


運営しているサイトです。どうぞよろしくお願いします(*´∇｀*)
HTML5Learners：HTML5を学び合うFacebookPage
HTML5サンプルページ：作成したサンプルを載せているサイト
YoheiM.NET：技術情報を中心に情報発信サイト

cooking_bot：料理情報をつぶやくTwitterアカウント