woshidan's blog

そんなことよりコードにダイブ。

UIViewのメソッドにCGContextRefオブジェクトを渡してStoryBoard上に図形を描画する

内容

上の本を参考にiOSのUIViewと戯れています。

  • 図形の描画
    • 色や太さなどの設定と描画にCGContextRefを使う
    • 直線の描画
    • 円の描画
    • 塗りつぶしについて

タッチイベントの処理、タイマー処理までやったけど、それは一旦寝て起きてからまとめます。

図形の描画

色や太さなどの設定と描画にCGContextRefを使う CGContextRefのオブジェクトを使います。

色とか透明度とか太さとかいろいろもって描画の設定を持ったクラスの名前をContextとして~みたいな話を読んでから、AndroidのContextよりダイレクトにそういう事例に見えるクラスが来た~という感じです*1

基本的に、CGContextRefのオブジェクトをUIViewのインスタンスメソッド?(クラスメソッドかもしれないのでアップ前に調査)に渡して設定したり描画したりします。

// UIGraphicsGetCurrentContext()メソッドで取得
// 塗りつぶし用と線描画用で分かれている
CGContextSetRGBFillColor(_contextRef, CGFloat(r) / 255.0, CGFloat(g) / 255.0, CGFloat(b) / 255.0, CGFloat(alpha))
CGContextSetRGBStrokeColor(_context, CGFloat(r) / 255.0, CGFloat(g) / 255.0, CGFloat(b) / 255.0, CGFloat(alpha))

// 図形を描画するときに上のようなメソッドで設定を行ったcontextRefを渡す
CGContextStrokePath(_contextRef)

直線の描画

  • CGContextMoveToPoint(_context, CGFloat(x), CGFloat(y))で始点を設定
  • CGContextAddLineToPoint(_context, CGFloat(x1), CGFloat(y1))で次の頂点を設定(複数設定すると折れ線や多角形が書ける)
  • 最後にCGContextStrokePath(_contextRef)で描画

円の描画

CGContextAddEllipseInRect(_context, CGRectMake(CGFloat(x), CGFloat(y), CGFloat(width), CGFloat(height))) // 楕円の大きさは円が内接する四角形を渡して指定
CGContextStrokePath(_context)

塗りつぶしについて

// 四角形
CGContextFillRect(_contextRef, someRect)

// 円
// 楕円の大きさは円が内接する四角形を渡して指定
CGContextFillRect(_contextRef, someRect)

// 点を足して...とかしていないので CGContextStrokePath(_contextRef)は不要

うちの周りはドードーばかりいますが、ルアーモジュールの桜に近づいたところ、イーブイがGETできたので嬉しいです。

*1:お仕事でAndroidで線などの描画をやっていたときはPaintオブジェクトを使っていた