How do you set a gradient fillcolor for cashapelayer without using a mask?

Question

How do you set a gradient fillcolor for cashapelayer? Related question with clearer explanation: Using Cocoa To Follow A Path With A Gradient

I need a gradient that's not a mask, but instead a gradient based on the drawing of the cashapelayer's path.

I can't use a gradient mask on top, because I'm making a route on the minimap in my game. So if the player walks over his own tracks, it should be in a different color.

I want it like this mapview's polyline:
^{Source: http://cdn4.raywenderlich.com/wp-content/uploads/2014/06/23_multicolor_polyline.png}

I made the minimap route by: logging all the user's different directions, then running them through a loop into bezier paths.

I appended the Bezier paths, and then put it on a cashapelayer.

Is there a way to have a multicolored in a cashapelayer?

Is there a keypath for cabasicanimation that can put a gradient?

My code is below, and some images.

[mymapview.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)];
[[mymapview subviews]
 makeObjectsPerformSelector:@selector(removeFromSuperview)];
int i = 0;
int x = 17;
int y = 272;
int m = 16;
UIBezierPath *kpath = [UIBezierPath bezierPath];    while (i < HistDirections.count)
{
    if (i > 0)
    {
            UIBezierPath *path = [UIBezierPath bezierPath];
            [path moveToPoint:CGPointMake(x, y)];
             if ([[HistDirections objectAtIndex:i] intValue] ==1)
             {
                 [path addLineToPoint:CGPointMake(x, y-m)];
                 y = y - m;
             }
             else if ([[HistDirections objectAtIndex:i] intValue] ==2)
             {
                 [path addLineToPoint:CGPointMake(x-m, y)];
                 x = x -m;
             }
             else if ([[HistDirections objectAtIndex:i] intValue] ==3)
             {
                 [path addLineToPoint:CGPointMake(x+m, y)];
                 x = x+m;
             }
             else
             {
                 [path addLineToPoint:CGPointMake(x, y+m)];
                 y = y - m;
             }
        [kpath appendPath:path];
    }
    i++;
}
[CATransaction begin];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
[CATransaction setCompletionBlock:^{
    UIImageView *viewpulse = [[UIImageView alloc] initWithFrame:CGRectMake(x -5, y-5, 10.0, 10.0)];
    viewpulse.image = [UIImage imageNamed:@"arro.png"];
    viewpulse.backgroundColor = [UIColor clearColor];
    if(direction == 1)
    {
        viewpulse.transform = CGAffineTransformMakeRotation(-M_PI/2);
    }
    else if (direction == 2)
    {
        viewpulse.transform = CGAffineTransformMakeRotation(M_PI);
    }
    else if (direction == 4)
    {
        viewpulse.transform = CGAffineTransformMakeRotation(M_PI/2);
    }
    [mymapview addSubview:viewpulse];
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.duration = 0.8;
    scaleAnimation.repeatCount = HUGE_VAL;
    scaleAnimation.autoreverses = YES;
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.6];
    scaleAnimation.toValue = [NSNumber numberWithFloat:0.8];
    [viewpulse.layer addAnimation:scaleAnimation forKey:@"scale"];
}];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];

kpath.lineCapStyle = kCGLineCapRound;
kpath.lineCapStyle = kCGLineJoinRound;

shapeLayer.path = [kpath CGPath];

shapeLayer.strokeColor = [[UIColor colorWithRed:51/255.0f green:(51)/255.0f blue:170/255.0f alpha:1.0f] CGColor];
shapeLayer.lineWidth = 4.0;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.fillColor = [[UIColor clearColor] CGColor];
[mymapview.layer addSublayer:shapeLayer];

CABasicAnimation *HAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
float dur = (HistDirections.count * 0.27);
if (dur > 2)
{
    dur = 2;
}
HAnimation.duration            = dur;
HAnimation.repeatCount         = 1.0;
HAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
HAnimation.toValue   = [NSNumber numberWithFloat:1.0f];



/*
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = mymapview.frame;
gradientLayer.colors = @[(__bridge id)[UIColor blueColor].CGColor,(__bridge id)[UIColor greenColor].CGColor,(__bridge id)[UIColor yellowColor].CGColor,(__bridge id)[UIColor orangeColor].CGColor, (__bridge id)[UIColor redColor].CGColor];
gradientLayer.startPoint = CGPointMake(0,0.5);
gradientLayer.endPoint = CGPointMake(1,0.5);

[mymapview.layer addSublayer:gradientLayer];
gradientLayer.mask = shapeLayer;*/
[CATransaction commit];

Gradient mask:

Monocolor line:

score 1 · Accepted Answer · answered Apr 02 '15 at 00:14

1

Nevermind! I figured out what I can do. Since I create the layer from multiple paths, I just put the cgpaths into an array, and looped each path into a unique cashapelayer with it's own color

answered Apr 02 '15 at 00:14

Jake Crastly

462
3
9

How do you set a gradient fillcolor for cashapelayer without using a mask?

1 Answers1