.-- --

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサー広告 comment(-) trackback(-)
.23 2009

Quartz でも角丸矩形

連休明けでイマイチ調子の出ない Tasaki です。

以前、角丸ボタンの作成法(というか対処法)について紹介しましたが、
今回は、Quartz を使ってコードのみで
角丸矩形を描画する方法を考えてみようと思います。
(といっても、Apple のサンプルプロジェクト UICatalog で
使われている手法の原理を考察したものでしかありませんが。)

このアプローチは、画像を用意しておく方法に比べて、融通が利きます。
そんなわけで僕は、これをテキスト表示の背景に使用しています。

標準で、これを実現する関数が用意されていないため、
パス生成関数を組み合わせて作成する訳ですが、
下の関数を使えば、コード量を抑えることができます。

void CGContextAddArcToPoint( CGContextRef c, CGFloat x1, CGFloat y1, CGFloat x2, CGFloat y2, CGFloat radius )


引数についてですが、
c は現在のグラフィックコンテキスト、
x1, y1 は弧の始点を通る接線上の点の座標、
x2, y2 は弧の終点の座標、
radius は弧の半径を表します。

この関数は、パスの現在位置を A (x0, y0)、座標(x1, y1)を B、座標(x2, y2) をCとしたとき、
線分ABと線分BCに接する半径radiusの弧をパスに追加し、
パスの現在位置を弧の終点とします。
また、Aが弧の始点でない場合は、Aから弧の始点までを直線として
自動的にパスに追加してくれます。

図で描くとこんな雰囲気です。
glaph.png

で、肝心のコードの流れは以下のようになります。
①パスの始点を設定
②矩形の四隅に対して順番に弧を追加
③パスを閉じる
④描画

CGRect 型の変数に予め矩形情報を設定しておくと、
こんな感じのコードが書けます。
void CGContextFillStrokeRoundedRect( CGContextRef context, CGRect rect, CGFloat radius ) {
 CGContextMoveToPoint( context, CGRectGetMinX( rect ), CGRectGetMidY( rect ));
 CGContextAddArcToPoint( context, CGRectGetMinX( rect ), CGRectGetMinY( rect ), CGRectGetMidX( rect ), CGRectGetMinY( rect ), radius );
 CGContextAddArcToPoint( context, CGRectGetMaxX( rect ), CGRectGetMinY( rect ), CGRectGetMaxX( rect ), CGRectGetMidY( rect ), radius );
 CGContextAddArcToPoint( context, CGRectGetMaxX( rect ), CGRectGetMaxY( rect ), CGRectGetMidX( rect ), CGRectGetMaxY( rect ), radius );
 CGContextAddArcToPoint( context, CGRectGetMinX( rect ), CGRectGetMaxY( rect ), CGRectGetMinX( rect ), CGRectGetMidY( rect ), radius );
 CGContextClosePath( context );
 CGContextDrawPath( context, kCGPathFillStroke );
}

これを使えば角丸矩形を簡単に描くことができます。

関連記事
スポンサーサイト

Comment

Post comment

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

Trackback

trackbackURL:http://appteam.blog114.fc2.com/tb.php/20-89700768

ブログ内検索

関連リンク

製品情報

最新記事

カテゴリ

プロフィール

neoxneo



NEXT-SYSTEM iOS Developers Blog


  • UTO:
    カナダ版iPhone4Sは、マナーモードでシャッター音がならない…


  • Ehara:
    ...


  • Hayate:
    ...


  • Tasaki:
    Developer登録完了...したのはいいけど


  • Ueda:
    ...



リンク

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。