正弦CAShapeLayer作为CALayer的面具 [英] Sine CAShapeLayer as a mask of CALayer

问题描述

我正在尝试实施下一个奇怪的事情：
我有一些点，我想用正弦波链接它们

I'm trying to implement the next curious thing: I have a few dots and I'd like to link them with sine waves

下一步方法返回用于制作绘图的点数组：

Next method returns the array of dots for making plot:

- (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添加此路径：

Next I'm adding this path using 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];

所以我希望在这些点之间有渐变正弦波。我的行为究竟出了什么问题？

So I'd like to have gradient sine wave between this points. What exactly is wrong in my actions?

理想：

推荐答案

程序运行正常 - 也就是说，它正是你正在做的事情告诉它要做。问题在于你告诉它（在你的代码中）不是你想要的（用你的问题中的单词和图片）。

The program is behaving correctly - that is, it is doing exactly what you are telling it to do. The problem is that what you are telling it to do (in your code) is not what you say you want (in your words and picture in your question).

首先你做错了什么：你说 closePath 。所以它正在关闭这条道路！这意味着，在绘制了波形后，它将最后一个点用直线连接回第一个点，给出你所显示的形状。

First thing you're doing wrong: you said closePath. So it's closing the path! That means that, having drawn the wave, it connects the last point back to the first point with a straight line, giving the shape that you show.

你要做的第二件事做错了：你没能操纵形状层。你正在制作一个vanilla CAShapeLayer并将其保留为默认值。好吧，默认是 fillColor 是黑色的（没有 strokeColor ）。你没有改变它。所以你得到的（不正确的）形状充满黑色，没有笔画，因此产生的面具是你（不正确）形状内部的形状，给出你所显示的渐变面具形状。

Second thing you're doing wrong: you are failing to manipulate the shape layer. You are making a vanilla CAShapeLayer and leaving it at its defaults. Well, the default is that the fillColor is black (and no strokeColor). You are not changing that. So you are getting your (incorrect) shape filled with black, and no stroke, and hence the resulting mask is the shape of the inside of your (incorrect) shape, giving the gradient mask shape that you show.

这篇关于正弦CAShapeLayer作为CALayer的面具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！