OGeek|极客世界-中国程序员成长平台

标题: ios - 如何使用 CoreGraphics 绘制一条边缘逐渐变化的线？ [打印本页]

---

作者: 菜鸟教程小白    时间: 2022-12-13 13:19
标题: ios - 如何使用 CoreGraphics 绘制一条边缘逐渐变化的线？

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

我现在只能使用以下代码将颜色更改为晶莹剔透:

-(void)touchesMovedNSSet *)touches withEventUIEvent *)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];

}

我怎样才能通过逐渐变化获得优势？提前致谢。

---

Best Answer-推荐答案

您可以通过在用户通过的每个点以 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);

下面是这段代码的截图:

注意:使用这种技术，如果用户快速移动他/她的手指，您可能会看到离散的画笔点可见的间距效果。这是某些绘图软件的功能，但如果您不希望这样做，您可以添加代码以在当前和上一个之间插入点以绘制更多画笔点，从而创建更连续的笔触。

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

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

关于ios - 如何使用 CoreGraphics 绘制一条边缘逐渐变化的线？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36591545/

---

欢迎光临 OGeek|极客世界-中国程序员成长平台 (https://ogeek.cn/)

Powered by Discuz! X3.4