ios - Sine CAShapeLayer 作为 CALayer 的 mask

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];

所以我想在这些点之间有梯度正弦波。我的行为究竟有什么问题？

理想:

Answer 1

该程序运行正常 - 也就是说，它完全按照您的指示进行操作。问题是你告诉它做什么(在你的代码中)不是你说你想要的(在你的问题中的文字和图片中)。

首先你做错了:你说 closePath。所以它正在关闭路径!这意味着，在绘制波浪之后，它将最后一个点与第一个点用一条直线连接起来，给出您显示的形状。

你做错的第二件事:你没有操纵形状层。您正在制作一个 Vanilla CAShapeLayer 并将其保留为默认值。嗯，默认情况下 fillColor 是黑色的(没有 strokeColor)。你没有改变它。因此，您得到的(不正确的)形状用黑色填充，没有描边，因此生成的 mask 是您(不正确的)形状内部的形状，给出了您显示的渐变 mask 形状。