角丸の領域をグラデーションで塗りつぶす : Objective-C プログラミング

PROGRAM

以前に UIView をグラデーションで塗りつぶすで、UIView の表示領域をグラデーションで塗りつぶす方法についてお話をしましたけど、それの角を丸く取ることもできます。

なお、単純に角を丸くしたいだけだったり、サブビューも含めt角を丸く取りたいときには、UIView や UITableView の角を丸くカットするでお話した方法を使用するのが簡単です。

ここでは、角を丸く取るために、角を丸くしたパスを作成して、そのパス内でクリッピングしてから、グラデーションを塗ってみようと思います。

まず、グラデーションを塗る前までの、クリッピングを行うまでのプログラムは次のような感じになります。

// 現在のキャンバスを取得します。

CGContextRef context = UIGraphicsGetCurrentContext();

// 最後にクリッピングを解除するために、現在のキャンバスの状態を保存しておきます。

CGContextSaveGState(context);

// 角を丸く取ったパスを作成します。

CGFloat minX = CGRectGetMinX(rect);

CGFloat minY = CGRectGetMinY(rect);

CGFloat midX = CGRectGetMidX(rect);

CGFloat midY = CGRectGetMidY(rect);

CGFloat maxX = CGRectGetMaxX(rect);

CGFloat maxY = CGRectGetMaxY(rect);

CGContextMoveToPoint(context, minX, midY);

CGContextAddArcToPoint(context, minX, minY, midX, minY, radius);

CGContextAddArcToPoint(context, maxX, minY, maxX, midY, radius);

CGContextAddArcToPoint(context, maxX, maxY, midX, maxY, radius);

CGContextAddArcToPoint(context, minX, maxY, minX, midY, radius);

// パスを閉じておきます。塗る場合は閉じなくても問題ありませんが、ストローク線を引く場合はパスが切れてしまいます。

CGContextClosePath(context);

// 作成したパスでキャンバスをクリッピングします。

CGContextClip(context);

このようにすることで、以降のキャンバスの描画エリアが、指定したパス（角を丸く切り取った領域）に限定されます。

この状態で、UIView をグラデーションで塗りつぶすで紹介したのと全く同じ方法でグラデーションを描画すると、クリッピング設定した領域だけ（角を丸く絞った範囲内）にグラデーションが塗られる感じになります。

グラデーションを塗り終わって、クリッピングが不要になったら、必ずクリッピングを設定する前に保存しておいたキャンバスの状態に戻しておきます。

// 最後に必ず、クリッピング前のキャンバスの状態に戻しておきます。

CGContextRestoreGState(context);

このような流れで、角丸の領域をグラデーションで塗りつぶすことが出来ました。