CoreGraphicsを使用して徐々にエッジを変更して線を描画するにはどうすればよいですか？

Question

ブラシのような機能を実現したい。指がスワイプする領域が徐々に境界を変えてtrasparentに変わります。

私は以下のコードで今クリアクリスタルに色を変更することができます

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event { 
if(self.eraser) return; 

CGFloat scale = self.transform.a; 
if (scale < 1) scale = 1; 

CGPoint p = [[touches anyObject] locationInView: self]; 
CGPoint q = [[touches anyObject] previousLocationInView: self]; 

UIImage* image; 
image = self.image; 
CGSize size = self.frame.size; 
UIGraphicsBeginImageContext(size); 
CGRect rect; 
rect.origin = CGPointZero; 
rect.size = size; 
[image drawInRect:rect]; 
CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextSetLineCap(context, kCGLineCapRound); 

CGContextBeginPath(context); 
CGContextSaveGState(context); 
CGContextSetLineWidth(context, (10.0/scale) + 1); 
CGContextSetBlendMode(context, kCGBlendModeClear); 

CGContextMoveToPoint(context, q.x, q.y); 
CGContextAddLineToPoint(context, p.x, p.y); 
CGContextStrokePath(context); 
CGContextRestoreGState(context); 

UIImage* editedImage = UIGraphicsGetImageFromCurrentImageContext(); 
UIGraphicsEndImageContext(); 
[self setBounds:rect]; 
[self setImage:editedImage]; 

}

どのように私は徐々に変化してエッジを得ることができますか？前もって感謝します。

Answer 1

この効果は、ユーザーが通過する各スポットのkCGBlendModeDestinationInモードで可変アルファを使用してラジアルグラデーションを描画することで実現できます。

このブレンドモードでは、下のレイヤーにレイヤーのアルファを適用するだけの効果があります。グラデーションの変数alphaを使用すると、この効果を得ることができます。ここで

const CGFloat kBrushSize = 10.f; 

CGContextSaveGState(context); 

// Make a radial gradient that goes from transparent black on the inside 
// to opaque back on the outside. 
size_t num_locations = 2; 
CGFloat locations[2] = { 0.0, 1.0 }; 
CGFloat components[8] = { 1.0, 1.0, 1.0, 0.0, 
          1.0, 1.0, 1.0, 1.0 }; 

CGColorSpaceRef myColorspace = CGColorSpaceCreateWithName(kCGColorSpaceGenericRGB); 
CGGradientRef myGradient = CGGradientCreateWithColorComponents (myColorspace, components, 
                   locations, num_locations); 
CGColorSpaceRelease(myColorspace); 

// Draw the gradient at the point using kCGBlendModeDestinationIn 
// This mode only applies the new layer's alpha to the lower layer. 
CGContextSetBlendMode(context, kCGBlendModeDestinationIn); 
CGContextDrawRadialGradient(context, myGradient, p, 0.f, p, (kBrushSize/scale) + 1, kCGGradientDrawsAfterEndLocation); 

CGGradientRelease(myGradient); 

CGContextRestoreGState(context); 

はアクションで、このコードのスクリーンショットです：

注：この技術を使用して、ユーザーが彼/彼女の指が非常に速く動いているならば、あなたは間隔の効果を見ることができます離散的なブラシドットが見える。これはグラフィックスソフトウェアの機能の一部ですが、これが望ましくない場合は、現在と最後の間のポイントを補間するコードを追加して、より多くのブラシポイントを描画し、より連続的なストロークを作成できます。

また、任意の種類のブラシの柔らかさを実現するために、グラデーションのカラーストップを調整できる必要があります。

出典：https://developer.apple.com/library/mac/documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_shadings/dq_shadings.html