頭と尻尾はくれてやる!

パソコンおやじのiPhoneアプリ・サイト作成・運営日記


Core Graphicsでアナログ時計を作ってみる(3)背景をつくる

では、まず背景の見た目を担当するBackGroundViewクラスから。
BackGroundView.mの初期化を担当する部分。
- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
        [self setBackgroundColor:[UIColor whiteColor]];
    }
    return self;
}
背景を白に設定、ってだけ書いてます。
この白くなる部分、つまりこのオブジェクトのサイズはここでは記述していません。
このオブジェクトを生成する部分、つまりClockViewControllerクラス内に記述しています。
こういうのはどちらに書くべきなのでしょうかね?

背景の見た目を担当するBackGroundViewクラスの続き。
背景をごにょごにょと描きます。
背景のサイズは300×300pxとしています。
よって、描画の中心を画面中央にするためオフセットを150px(x、yとも)としています。

長いですがこんな感じ。
- (void)drawRect:(CGRect)rect {
   
    float offsetX = 150;
    float offsetY = 150;
   
    CGContextRef context = UIGraphicsGetCurrentContext();
   
    //中心の小さい点
    float rCenter=2.5;
    CGContextSetRGBFillColor(context, 0.3, 0.0, 0.0, 1.0);//fillする色
    CGContextFillEllipseInRect(context, CGRectMake(offsetX-rCenter, offsetY-rCenter, rCenter*2, rCenter*2));
    CGContextFlush( context );
   
    // 12個のドットの色
    CGContextSetRGBFillColor(context, 0.8, 0.8, 0.8, 1.0);
  
    float r1 = 110;//ドットの位置を決める半径
    float rDot1 = 3;//ドットの半径
    float dot1X,dot1Y;//ドットの位置
    float charX,charY;//数字位置
    float rChar = r1+20;//数字を置く位置を決める半径
    int ii;
   
    //12個のドットを描く
    float offsetRad = M_PI/2;
    for (ii=1; ii<=12; ii++) {
        dot1X=offsetX+r1*cos(30*(float)ii/180*M_PI-offsetRad);
        dot1Y=offsetY+r1*sin(30*(float)ii/180*M_PI-offsetRad);
        CGContextFillEllipseInRect(context, CGRectMake(dot1X-rDot1, dot1Y-rDot1, rDot1*2, rDot1*2));
    }
    CGContextFlush( context );

    //数字を描く
    CGContextSetTextDrawingMode( context,kCGTextFill );     // 塗り文字
    CGContextSetRGBFillColor( context,1.0,0.5,0.3,1.0 );    // 色指定

    CGContextSelectFont(context,"Helvetica", 30.0,kCGEncodingMacRoman);
    CGContextSetTextMatrix(context, CGAffineTransformMakeScale(1.0, -1.0));//文字列を逆にしないため
   
    for (ii=1; ii<=12; ii++) {
        charX=offsetX+rChar*cos(30*(float)ii/180*M_PI-offsetRad);
        charY=offsetY+rChar*sin(30*(float)ii/180*M_PI-offsetRad);
       
        //補正
        if (ii<10){
            charX+=-9;
        }else{
            charX+=-18;
        }
        charY+=10;
       
        CGContextShowTextAtPoint(context , charX,charY,[iiStr UTF8String],[iiStr length]);
    }
}
drawRect:メソッド内でないとこのあたりのCore Graphics関連の描画ができなかったので、このように記述しています。
なお、当方でdrawRect:メソッドを呼び出すことはしていません。
オブジェクト生成時に勝手に呼び出されるようです。


関連ページ
頭と尻尾はくれてやる! Core Graphicsでアナログ時計を作ってみる(1)はじめに
頭と尻尾はくれてやる! Core Graphicsでアナログ時計を作ってみる(2)全体の構成
頭と尻尾はくれてやる! Core Graphicsでアナログ時計を作ってみる(4)背景のオブジェクトを生成する
頭と尻尾はくれてやる! Core Graphicsでアナログ時計を作ってみる(5)ビューコントローラーのオブジェクト生成
頭と尻尾はくれてやる! Core Graphicsでアナログ時計を作ってみる(6)秒針を作る
頭と尻尾はくれてやる! Core Graphicsでアナログ時計を作ってみる(7)秒針を回転させる

<< Core Graphicsでアナログ時計を作ってみる(4)背景のオブジェクトを生成する  TopPage  Core Graphicsでアナログ時計を作ってみる(2)全体の構成 >>

コメント


管理者にだけ表示を許可する
 

トラックバック

トラックバックURL
http://ringsbell.blog117.fc2.com/tb.php/383-a14bd7b7




Copyright ©頭と尻尾はくれてやる!. Powered by FC2 Blog. Template by eriraha.

FC2Ad