从UIBezierPath使用CAShapeLayer屏蔽CAGradientLayer时的意外输出

Question

我正在使用this sample code中的Palimondo：这是学习如何将CAGradientLayer屏蔽到CAShapeLayers上的精彩代码。输出如下：

现在我正在尝试创建此图片：

使用PaintCode，我能够获取所有UIBezierPath和渐变颜色并停止并将它们放入多个数组中，并基本上遍历每个数组，并将其添加到新的CAShapeLayer和CAGradientLayer中：

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self blackPaths];
    [self setupGradients];
    int count = 0;
    for (CAGradientLayer *gradientLayerItem in _individualGradientArrays) {

        CAShapeLayer *gradientMask = [CAShapeLayer layer];
        gradientMask.fillColor = [[UIColor clearColor] CGColor];
        gradientMask.strokeColor = [[UIColor blackColor] CGColor];
        gradientMask.lineWidth = 4;
        gradientMask.frame = CGRectMake(0, 0, _testView.bounds.size.width, _testView.bounds.size.height);
        //
        //    CGMutablePathRef t = CGPathCreateMutable();
        //    CGPathMoveToPoint(t, NULL, 0, 0);
        //    CGPathAddLineToPoint(t, NULL, _testView.bounds.size.width, _testView.bounds.size.height);

        gradientMask.path = [[_UIBezierPathsArray objectAtIndex:count]CGPath];


        CAGradientLayer *gradientLayer = [CAGradientLayer layer];
        gradientLayer.locations = gradientLayerItem.locations;
        gradientLayer.startPoint = CGPointMake(0.5,1.0);
        gradientLayer.endPoint = CGPointMake(1.0,0.5);
        gradientLayer.frame = CGRectMake(0, 0, _testView.bounds.size.width, _testView.bounds.size.height);
        //    NSMutableArray *colors = [NSMutableArray array];
        //    for (int i = 0; i < 3; i++) {
        //        [colors addObject:(id)[[UIColor colorWithHue:(0.2 * i) saturation:1 brightness:.8 alpha:1] CGColor]];
        //    }
        gradientLayer.colors = gradientLayerItem.colors;

        [gradientLayer setMask:gradientMask];
        [_testView.layer addSublayer:gradientLayer];
        count++;
    }

[_testView setNeedsDisplay];

目标是拥有16个单独的CAGradientLayer，我可以使用CoreAnimation制作一种“旋转”效果（我可以将PaintCode的输出放入drawRect，它可以工作，问题是我被告知通过CoreGraphics设置颜色或渐变，而不是将它们放在图层中，我会有更困难的时间制作动画。

然后，这已经过时了：

在100次迭代之后，在此之前，我尝试将[UIColor clearColor]替换为whiteColor（这不是示例代码所需的）并输出：

你可以看到只有几个渐变，我相信whiteColor正在干扰CAGradientLayer。

我知道我必须遗漏一些非常微妙的东西，但我似乎无法看到它。

为什么在示例代码中，我们能够使用clearColor并且适当地显示渐变，但是使用clearColor并将我的UIBezierPath附加到我的CAShapeLayer中，渐变会破坏？

一位朋友提到另一个解决方案是拥有3个渐变圆圈，并且基本上将它们同心地旋转到蒙面形状上，从而产生幻觉，但是我不知道如何能够做到这一点。

Answer 1

很难说从这里到底发生了什么。在第三张图片中（基于您的代码），您将在屏幕上清晰填充周围绘制不透明的黑色笔触，因此当您将其用作蒙版时，只有您描边的区域才会从渐变层“可见”（这些只是笔画的暗示就是你可以看到中风杆）。当您将clearColor更改为whiteColor（不透明）时，路径中的区域也会从渐变层变得可见（提示这是由于笔划沿着路径中间运行，因此线条看起来更胖）从而“填充”填充物。此外，因为它们被填充物堵塞，因此不再可见中风杆。）

在遮罩层中，颜色无关紧要 - 重要的是alpha通道（不透明度）。这就是为什么whiteColor与blackColor没有区别。它们的alpha值均为1.0，而clearColor的alpha值为0.0。从标题：

/* A layer whose alpha channel is used as a mask to select between the
 * layer's background and the result of compositing the layer's
 * contents with its filtered background. Defaults to nil. When used as
 * a mask the layer's `compositingFilter' and `backgroundFilters'
 * properties are ignored. When setting the mask to a new layer, the
 * new layer must have a nil superlayer, otherwise the behavior is
 * undefined. */

@property(retain) CALayer *mask;

这就是为什么你不再看到第四张图像中的笔画效果 - 它们被掩码只看到alpha通道而不管色调（即白色或黑色）这两个画面都隐藏了alpha为1.0。

同样，目前还不清楚你到底想要做什么，但你对whiteColor的使用感觉就像一只红鲱鱼。如果您的目标看起来像第二个图像，您可能希望您的遮罩层没有笔触和不透明填充，如：

gradientMask.fillColor = [[UIColor blackColor] CGColor];
gradientMask.strokeColor = [[UIColor clearColor] CGColor];