在 CAShapeLayer 图下方绘制渐变

Question

我正在使用应用于 CAShapeLayer 的 CGPath 绘制图形。图形本身绘制得很好，但之后我想在其下方添加一个渐变。我的问题是路径是用一条从最后一点到第一点的直线封闭的（见下文）——这会使渐变填充看起来完全荒谬。

据我所知，绕过这个问题的唯一方法是再画两条线：一条从图表的最后一点到右下角，另一条从那里到底部- 左角。这会很好地关闭路径，但它会在图形中添加一条底线，这是我不想要的。

如果我使用的是 CGContext，我可以通过将最后两行的描边颜色更改为透明来轻松解决此问题。但是，使用下面的代码，我看不出这是怎么可能的。

CGMutablePathRef graphPath = CGPathCreateMutable();

for (NSUInteger i = 0; i < self.coordinates.count; i++) {
    CGPoint coordinate = [self.coordinates[i] CGPointValue];

    if (!i) {
        CGPathMoveToPoint(graphPath, NULL, coordinate.x, coordinate.y);
    } else {
        CGPathAddLineToPoint(graphPath, NULL, coordinate.x, coordinate.y);
    }
}

CAShapeLayer *graphLayer = [CAShapeLayer new];
graphLayer.path = graphPath;
graphLayer.strokeColor = [UIColor whiteColor].CGColor;
graphLayer.fillColor = [UIColor redColor].CGColor;

[self.layer addSublayer:graphLayer];

希望大家帮帮我！

更新： 你建议我可以创建一个 CAGradientLayer，然后应用图形层作为它的蒙版。但是，当 graph/path 看起来像它的样子时，我不明白它是如何工作的。我已将上图替换为另一幅图，希望能更好地说明问题（请注意，我已为 CAShapeLayer 提供了红色填充）。如我所见，如果我将上面的层应用为 CAGradientLayer 的蒙版，一些渐变将位于图形上方，一些位于下方。我想要的是将所有渐变放置在图表的正下方。

Answer 1

也许我没有正确理解这个问题，但是如果你想添加一致的渐变，你不能创建一个渐变层然后让你的 graphLayer 成为该层的蒙版吗？

找出坐标的最小最大边界，创建一个大小的 CAGradientLayer，根据需要对其进行配置，然后将 graphLayer 应用为蒙版。然后将新的 CAGradientLayer 添加到您的 self.layer.

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
// ... Configure the gradientLayer colors / locations / size / etc...
gradientLayer.mask = graphLayer;

[self.layer addSubLayer:gradientLayer];

这没有考虑笔划，但如果这很重要，应用起来应该也不难。

Answer 2

我通过创建两条单独的路径解决了这个问题：一条用于图表（如我原来的 post 所示），另一条从右下角开始，直线移动到左下角，并从那里沿着与图表相同的路径。通过这样做，路径被很好地关闭，因为图形结束于与路径开始处相同的 x 坐标。

从那里开始，我将第二条路径应用于 CAShapeLayer，然后将此图层用作渐变图层的遮罩。

在 CAShapeLayer 图下方绘制渐变

Draw gradient below a CAShapeLayer graph

objective-c

cashapelayer

cgpath

ios