在 CAShapeLayer 图下方绘制渐变答案

【问题标题】：Draw gradient below a CAShapeLayer graph在 CAShapeLayer 图下方绘制渐变
【发布时间】：2023-07-14 18:32:01
【问题描述】：

我正在使用应用于 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，然后将图形图层应用为其蒙版。但是，当图形/路径看起来像它的样子时，我看不出它是如何工作的。我已经用另一个图表替换了上面的图像，希望能更好地说明问题（请注意，我已经给 CAShapeLayer 一个红色填充）。正如我所看到的，如果我将上面的图层应用为 CAGradientLayer 的蒙版，一些渐变将位于图形上方，一些位于下方。我想要的是将所有渐变放在图形的正下方。

【问题讨论】：

这是您的解决方案：*.com/a/7264787/312312
你真的想要那个红色填充吗？还是只希望图形下方的区域用渐变填充，而没有可见的对角线？
@robmayoff 我不想要红色填充，不；只是从图形线正下方开始的渐变。
@Lefteris 请查看我的更新。我认为您链接到的解决方案不适用于此特定问题。

标签： ios objective-c cashapelayer cgpath

【解决方案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];

这并没有考虑到中风，但如果这很重要，应用它应该也不难。

【讨论】：

我已经用一张新图片和更多信息更新了我的帖子。

【解决方案2】：

我通过创建两条单独的路径解决了这个问题：一条用于图表（如我的原始帖子所示），一条从右下角开始，直线移动到左下角，以及从那里遵循与图相同的路径。通过这样做，路径可以很好地关闭，因为图形在与路径开始位置相同的 x 坐标处结束。

从那里，我将第二条路径应用到 CAShapeLayer，然后将此层用作渐变层的蒙版。

【讨论】：