【问题标题】:How do you set a gradient fillcolor for cashapelayer without using a mask?如何在不使用蒙版的情况下为 Cashapelayer 设置渐变填充颜色?
【发布时间】:2023-06-05 18:47:01
【问题描述】:

如何为cashapelayer 设置渐变填充颜色? 具有更清晰解释的相关问题: Using Cocoa To Follow A Path With A Gradient

我需要一个不是遮罩的渐变,而是基于 Cashapelayer 路径绘制的渐变。

我不能在顶部使用渐变蒙版,因为我正在游戏中的小地图上制作路线。所以如果玩家走过自己的轨道,它应该是不同的颜色。

我希望它像这个 mapview 的折线:
来源:http://cdn4.raywenderlich.com/wp-content/uploads/2014/06/23_multicolor_polyline.png

我通过以下方式制作了小地图路线: 记录所有用户的不同方向,然后通过循环将它们运行到贝塞尔路径。

我附加了 Bezier 路径,然后将其放在 Cashapelayer 上。

有没有办法在 Cashapelayer 中使用多色?

是否有可以放置渐变的 cabasicanimation 键路径?

我的代码如下,还有一些图片。

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

渐变蒙版:

单色线:

【问题讨论】:

    标签: cocoa-touch core-animation gradient cabasicanimation cashapelayer


    【解决方案1】:

    没关系!我想出了我能做什么。由于我从多个路径创建图层,因此我只是将 cgpaths 放入一个数组中,并将每个路径循环成一个具有自己颜色的独特 Cashapelayer

    【讨论】:

      最近更新 更多