CoreGraphicsで丸みを帯びた線形グラデーション（または拡張ラジアルグラディエント）を描画する

Question

CoreGraphicsでカスタム描画を行いたい。私は私のビューに線形のグラデーションが必要ですが、事は、このビューは丸みを帯びた矩形であるため、グラデーションを角度でも丸めたいと思っています。以下の画像で達成したいことが分かります。

これは、CoreGraphicsやその他のプログラム的で簡単な方法で実装できますか？ ありがとうございます。

Answer 1

私はそこにAPIがあるとは思わないが、例えば(N+1)x(N+1)サイズのビットマップコンテキストでラジアルグラデーションを描画してから、イメージをコンテキストからサイズ変更可能なものに変換すると同じ効果が得られます左右のキャップがNに設定された画像。

擬似コード：あなたは画像を垂直方向にも拡張したい場合には

UIGraphicsBeginImageContextWithOptions(CGSizeMake(N+1,N+1), NO, 0.0f); 
CGContextRef context = UIGraphicsGetCurrentContext(); 

// <draw the gradient into 'context'> 

UIImage* gradientBase = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 

UIImage* gradientImage = [gradientBase resizableImageWithCapInsets:UIEdgeInsetsMake(0,N,0,N)]; 

、あなただけUIEdgeInsetsMake(N,N,N,N)にキャップを設定する必要があります。

Answer 2

いくつかのことが明らかではないので、このテクニックのサンプルコードを追加したいだけです。多分それは、誰かのために有用であろう：

// Defining the rect in which to draw 
CGRect drawRect=self.bounds; 
Float32 gradientSize=drawRect.size.height; // The size of original radial gradient 
CGPoint center=CGPointMake(0.5f*gradientSize,0.5f*gradientSize); // Center of gradient 

// Creating the gradient 
Float32 colors[4]={0.f,1.f,1.f,0.2f}; // From opaque white to transparent black 
CGGradientRef gradient=CGGradientCreateWithColorComponents(CGColorSpaceCreateDeviceGray(), colors, nil, 2); 

// Starting image and drawing gradient into it 
UIGraphicsBeginImageContextWithOptions(CGSizeMake(gradientSize, gradientSize), NO, 1.f); 
CGContextRef context=UIGraphicsGetCurrentContext(); 
CGContextDrawRadialGradient(context, gradient, center, 0.f, center, center.x, 0); // Drawing gradient 
UIImage* gradientImage=UIGraphicsGetImageFromCurrentImageContext(); // Retrieving image from context 
UIGraphicsEndImageContext(); // Ending process 
gradientImage=[gradientImage resizableImageWithCapInsets:UIEdgeInsetsMake(0.f, center.x-1.f, 0.f, center.x-1.f)]; // Leaving 2 pixels wide area in center which will be tiled to fill whole area 

// Drawing image into view frame 
[gradientImage drawInRect:drawRect]; 

すべてです：

だから、私たちは、カスタムビュークラスを持っており、それに我々はこれを置くdrawRect:方法だ、のは言わせて。また、アプリケーションの実行中にグラデーションを変更しない場合は、最後の行を除くすべてをawakeFromNibメソッドに配置し、次にdrawRect:にはビューのフレームにgradientImageを描画します。この場合はgradientImageを保持することも忘れないでください。