CAGradientLayer 没有正确绘制渐变

Posted 2023-02-23

【中文标题】CAGradientLayer 没有正确绘制渐变

【英文标题】：CAGradientLayer not draw the gradient correctly

【发布时间】：2016-06-11 07:48:23

【问题描述】：

我用CAShapeLayer画了一个圆，设置为CAGradientLayer的mask，代码如下：

CAShapeLayer *circleShapeLayer = [CAShapelayer new];
// draw circle path code here...

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = @[(__bridge id)[UIColor whiteColor].CGColor,
                         (__bridge id)[UIColor clearColor].CGColor];
// self here means a UIView
gradientLayer.mask = circleShapeLayer;
gradientLayer.frame = self.bounds;
[self.layer addSublayer:gradientLayer];

当我运行应用程序时，它会显示一个渐变圆圈，但是渐变很奇怪。

我想要的是一个圆圈，起点是白色，终点是透明色，应该是这样的：

但是模拟器屏幕中圆圈的颜色是：

颜色是对称的。

我认为问题是我没有正确设置gradientLayer.colors，我该如何解决？

【问题讨论】：

你试过了吗？ ***.com/questions/5448618/…

【参考方案1】：

CAGradientLayer 不能沿弧线绘制渐变。另一方面，遮罩层的边框比渐变层的边框太小，看不到清晰的颜色

【参考方案2】：

对于 Umair 的回复，起初我觉得这没有意义，因为即使 whiteColor 或 blackColor 也被 colorWithRed:green:blue:alpha 获取，但后来我在文档中读到了这一点：

渲染时，颜色在被插值之前被映射到输出颜色空间。

所以也许真的是这样：

gradientLayer.colors = @[(__bridge id)[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:1.0f].CGColor,
                         (__bridge id)[UIColor colorWithRed:1.0f green:1.0f blue:1.0f alpha:0.0f].CGColor];

【参考方案3】：

@J.Hunter 的answer 是正确的，因为CAGradientLayers 不能沿着弧线绘制。这意味着您绘制的渐变将被限制为 radial 和 linear。您特别希望创建一个 angled 渐变，我过去也尝试过这样做。

不幸的是，CAGradientLayer 受到这些限制，而我发现创建带角度渐变的最佳方法是使用包含角度渐变的UIImage 进行屏蔽。这不会像绘制自己的渐变那样动态，但它似乎是目前最好的（可能是唯一的）选择。