スマホアプリの自習帳

SingleView でプロジェクトを作成 xlbを開き、既存のViewの上にラベルやボタンなどのコントロールと、CustomView用のUIViewを乗っける。

新規にUIViewを継承するクラスを作成し、さっき追加したCustomView用のObjectに関連づける。

作成したクラスの drawRect に描画のコードを追加。UIBezierPathを使って円弧を塗りつぶす。

ここで、１つひっかかってしまったのは、Pathに弧の部分だけを描いても思ったように塗りつぶせないこと。AndroidのCanvas.drawArcメソッドのuseCenterパラメータがfalseと同じ状態になり、弧の始点と終点を直線で結んだ内部だけが塗りつぶされる。円の中心も含めるには、Pathに明示的に円の中心までの直線を追加する必要がある。なお、塗りつぶし（fill）の場合は、Pathの始点と終点が自動的に直線で結ばれる（closeされる）が、線を描く（stroke）場合は、明示的に始点と終点を結ぶ線を追加するか、あるいはclosePathメソッドを呼び出さないと、開放されたPathのままで描かれる。

円弧を塗りつぶすコード例

    //draw filled arc for tic
    UIBezierPath *pathTic1 = [UIBezierPath bezierPathWithArcCenter:c radius:r startAngle:st1 endAngle:en1 clockwise:true];
    //Close the path.
    [pathTic1 addLineToPoint:c]; 

    // Set the render colors
    [[UIColor redColor] setFill];

    // Fill the path
    [pathTic1 fill];

• 参考
  • https://developer.apple.com/library/ios/#documentation/2DDrawing/Conceptual/DrawingPrintingiOS/BezierPaths/BezierPaths.html

This entry was posted on 2012年6月24日 at 6:01 午後 and is filed under Dev, iPhone apps. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.