Sine CAShapeLayer come una maschera di CALayer

Question

Sto cercando di implementare la prossima cosa curiosa: Ho un paio di punti e mi piacerebbe collegarli con onde sinusoidali

metodo seguente restituisce la matrice di punti per rendendo trama:

- (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; 
} 

Dopo che creo lo speciale 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; 
} 

Successivo sto aggiungendo questo percorso utilizzando 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]; 

Così mi piacerebbe avere un'onda sinusoidale gradiente tra questi punti. Cosa c'è di sbagliato nelle mie azioni?

ideale:

Answer 1

Il programma si comporta correttamente - che è, sta facendo esattamente quello che stai dicendo di fare. Il problema è che quello che stai dicendo di fare (nel tuo codice) non è quello che dici di volere (nelle tue parole e nella tua domanda).

Per prima cosa stai sbagliando: hai detto closePath. Quindi sta chiudendo il percorso! Ciò significa che, dopo aver disegnato l'onda, collega l'ultimo punto al primo punto con una linea retta, dando la forma che mostri.

Seconda cosa che stai facendo male: non riesci a manipolare il livello forma. Stai facendo un vanilla CAShapeLayer e lasciandolo alle sue impostazioni predefinite. Bene, il valore predefinito è che fillColor è nero (e non strokeColor). Non lo stai cambiando. Quindi stai ricevendo la tua forma (errata) riempita di nero e senza tratti, e quindi la maschera risultante è la forma della parte interna della tua (errata) forma, dando la forma della maschera gradiente che mostri.