使用CAShapeLayer作为CALayer的蒙版

Question

我将尝试实现一个有趣的事情： 我有几个点，我想用正弦波将它们连接起来。

下一个方法返回制作图表的点数组：

- (NSArray *)plotPointsBetweenPoint:(CGPoint)pointA andPoint:(CGPoint)pointB {
  double H = fabs(pointB.y - pointA.y);
  double L = fabs(pointB.x - pointA.x);

  NSInteger granularity = 40;
  NSMutableArray *array = [NSMutableArray arrayWithCapacity:granularity + 1];
  for (int i = 0; i <= granularity; ++i) {
    CGFloat x = M_PI*(float)i/(granularity);
    CGFloat y = -cosf(x);
    CGFloat multiplier = pointA.y > pointB.y ? 1 : -1;
    CGPoint newPoint = CGPointMake(pointA.x + L*(float)i/granularity, pointA.y - multiplier*H*(1.0 + y)/2.0);
    [array addObject:[NSValue valueWithCGPoint:newPoint]];
  }
  return array;
}

之后我创建了特殊的UIBezierPath:

- (UIBezierPath *)sineWaveWithPoints:(NSArray *)points {
  UIBezierPath *path = [[UIBezierPath alloc] init];
  NSMutableArray *array = [NSMutableArray array];

  for (int i = 0; i < points.count - 1; ++i) {
    [array addObjectsFromArray:[self plotPointsBetweenPoint:[points[i] CGPointValue] andPoint:[points[i+1] CGPointValue]]];
  }
  [path moveToPoint:[array[0] CGPointValue]];
  for (NSValue *value in array) {
    CGPoint point = [value CGPointValue];
    [path addLineToPoint:point];
  }
  [path closePath];
  path.lineWidth = 2.0;
  [path stroke];
  return path;
}

接下来我将使用CAShapeLayer添加这条路径：

CAGradientLayer *gradientLayer = [self gradientLayer];
CAShapeLayer *maskLine = [CAShapeLayer layer];
maskLine.path = [self sineWaveWithPoints:pointsArray].CGPath;
maskLine.lineWidth = self.plotWidth;
gradientLayer.mask = maskLine;
[self.view.layer addSublayer:gradientLayer];

所以我想在这些点之间有梯度正弦波。我的操作有什么问题呢？

理想情况下应该是这样的：

- agoncharov

---

很抱歉，我不明白你所说的“我想在这些点之间有渐变正弦波”的意思。你能否澄清一下你的意思，甚至可以展示一个模型（在图像编辑器中制作的示例）来说明你想要做什么？ - David Rönnqvist

当然。任务是创建一个图表，y值点的颜色取决于其高度（例如从紫色到黄色）。我决定用适当的颜色创建渐变层，并使用创建的正弦CAShapeLayer执行setMask方法来填充该线条。附注：我已经钉住了主要目标的渲染。 - agoncharov

用描边路径遮罩渐变？ - David Rönnqvist

Answer 1

程序的行为是正确的 - 也就是说，它正在按照您在代码中告诉它要做的来执行。问题在于，您在代码中告诉它要做的（即您在问题中描述的文字和图片）与您想要的并不相同。

您犯的第一个错误：您使用了“closePath”。因此，它正在关闭路径！这意味着，在绘制波浪后，它将最后一个点与第一个点连接起来，形成您所显示的形状。

您犯的第二个错误：您没有操作形状图层。您创建了一个普通的CAShapeLayer，并将其保留在默认设置上。默认设置是“fillColor”为黑色（而没有“strokeColor”）。您没有更改它。因此，您得到了填充为黑色（不正确的）形状，没有描边，因此所得到的蒙版是您（不正确的）形状内部的形状，从而给出了您所显示的渐变蒙版形状。

- matt