圆形 CAGradientLayer 蒙版

Posted 2023-03-13

【中文标题】圆形 CAGradientLayer 蒙版

【英文标题】：Circular CAGradientLayer Mask

【发布时间】：2013-04-16 17:39:25

【问题描述】：

我有一个UIView，它使用UIBezierPath 以编程方式绘制“sunburst”模式。现在我想通过用渐变遮罩边缘来扩展它——有效地使每个“突发”从不透明淡化为透明。我认为这可以通过 CAGradientLayer 掩码来完成，但我不确定如何使其成为圆形。

这就是我正在尝试的——它掩盖了视图，但渐变是线性的：

    CAGradientLayer *l = [CAGradientLayer layer];
    l.frame = CGRectMake(0.0f, 0.0f, rect.size.width, rect.size.height);
    l.cornerRadius = rect.size.width/2.0f;
    l.masksToBounds = YES;
    l.colors = [NSArray arrayWithObjects:(id)[UIColor blackColor].CGColor, (id)[UIColor clearColor].CGColor, nil];
    self.layer.mask = l;

如果有人知道用边缘模糊的圆圈遮盖视图的任何其他方法，我愿意不使用CAGradientLayer。

解决方案 感谢 matt 的洞察力，我最终使用CGContextDrawRadialGradient 绘制了一个遮罩视图，将其渲染为UIImage，并将其用作遮罩层。如果有人对此过程感兴趣，它正在使用this test project.

【参考方案1】：

一个明显的方法是手动绘制这种效果。从非常小的开始，将旭日形画得越来越大，并且（同时）越来越不透明。

另一方面，制作径向渐变并将其用作蒙版（晕影效果）可能就足够了。 Core Graphics 将为您绘制径向渐变：

https://developer.apple.com/library/ios/#documentation/graphicsimaging/reference/CGContext/Reference/reference.html#//apple_ref/c/func/CGContextDrawRadialGradient

我也很喜欢 CIFilters 添加这样的触摸：你应该浏览目录，看看有什么让你喜欢的：

https://developer.apple.com/library/ios/#documentation/graphicsimaging/reference/CoreImageFilterReference/Reference/reference.html

CIFilter 实际上为您提供了一个可能适合您的目的的旭日形过渡，尤其是与遮罩和合成结合使用时；这是我的书中对旭日形（用于动画）的讨论：

http://www.apeth.com/iOSBook/ch17.html#_cifilter_transitions

【讨论】：

我觉得 CGContextDrawRadialGradient 可能是解决这个问题的方法。我试试看。

我想你应该从 CGContextDrawRadialGradient 开始，then 用 CIFilter 模糊渐变的绘制，并使用 that 的结果作为遮罩. :)

我对此非常了解，这就是我接受答案的原因。我一直在使用 CGContextDrawRadialGradient 在我原来的“旭日形”视图上简单地绘制一个圆形渐变。实际上，如果我将渐变颜色与背景颜色相匹配，则效果很好。但是我将如何实际使用渐变 UIView 来掩盖原始的旭日形 UIView（用例是如果我在非纯色背景上使用它）？

我想出的唯一方法是将蒙版视图渲染到 UIImage，然后将其用作图层蒙版的内容。也就是说，有没有什么办法可以直接从 UIView 到 mask 呢？

抱歉，您认为您的操作有什么问题？蒙版是一层；图层的内容是 CGImage；显然你需要以某种方式获得一个CGImage；听起来您正在获得它；有什么问题？

【参考方案2】：

CAGradientLayer 绘制线性渐变。

您可以尝试设置阴影，看看是否适合您的需要：

l.shadowColor = [UIColor blackColor];
l.shadowRadius = rect.size.width / 2;

【讨论】：

没有，但谢谢。如果有另一种制作圆形模糊边缘蒙版的方法，我显然愿意不使用 CAGradientLayer。

【参考方案3】：

您可以通过创建一个 CALayer 实例并给它一个实现 drawLayer:inContext: 的委托来做到这一点，并在该方法的实现中绘制一个径向渐变。然后使用那个 CALayer 作为你的掩码。