如何使用 CoreGraphics 绘制边缘逐渐变化的线？

Question

我想完成一个像画笔一样的功能。手指滑动区域变为透明，边框逐渐变化

我现在只能使用以下代码将颜色更改为 crystal clear:

-(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 的径向渐变来实现此效果。

此混合模式的效果是仅将图层的 Alpha 应用到下面的图层。使用渐变的可变 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);

下面是这段代码的截图：

注意：使用此技术，如果用户移动 his/her 手指非常快，您可能会看到间距效果，其中离散的画笔点可见。这是一些图形软件的功能，但如果您不希望这样做，您可以添加代码在当前点和最后一个点之间插入点，以绘制更多画笔点，创建更连续的笔触。

此外，您应该能够调整渐变色标以获得您喜欢的任何类型的画笔柔和度。

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

如何使用 CoreGraphics 绘制边缘逐渐变化的线？

How can I draw a line with gradually change edge using CoreGraphics?

core-graphics

objective-c

cgcontext

ios

cggradientref