ios - 如何为 UIBezierPath 使用自定义图像

Question

我用 CAShaperLayer 和 UIBezierPath 做了一个半圆？

喜欢下面

clockWiseLayer = [[CAShapeLayer alloc] init];

CGFloat startAngle = -M_PI_2;
CGFloat endAngle = M_PI + M_PI_2;

CGFloat width = CGRectGetWidth(imageView.frame)/2.0f;
CGFloat height = CGRectGetHeight(imageView.frame)/2.0f;
CGPoint centerPoint = CGPointMake(width, height);

float radius = CGRectGetWidth(imageView.frame)/2+7;

clockWiseLayer.path = [UIBezierPath bezierPathWithArcCenter:centerPoint
                                                    radius:radius
                                                startAngle:startAngle
                                                  endAngle:endAngle
                                                 clockwise:YES].CGPath;

clockWiseLayer.fillColor = [UIColor clearColor].CGColor;
clockWiseLayer.strokeColor = [UIColor blueColor].CGColor;
clockWiseLayer.borderColor = [UIColor greenColor].CGColor;
clockWiseLayer.backgroundColor = [UIColor grayColor].CGColor;

clockWiseLayer.strokeStart = 0.0f;
clockWiseLayer.strokeEnd = 0.5f;

clockWiseLayer.lineWidth = 2.0f;
clockWiseLayer.borderWidth = 5.0f;

clockWiseLayer.shouldRasterize = NO;
[imageView.layer addSublayer:clockWiseLayer];

这里，描边颜色显示bluecolor，我怎样才能从头到尾放置自定义颜色阴影，或者像开始时它必须更蓝，而不是当它返回时，它变得更少蓝色或白色。

在其他方法中，我可以使用 UIImage 代替它。如何将 UIImage 放在这个 stokeColor 上。

谢谢。

Answer 1

这是一个可行的解决方案:

它绕着圆圈一直走，但你明白了，它看起来像一个渐变笔触:

从一个宏开始:

#define   DEGREES_TO_RADIANS(degrees)  ((M_PI * degrees)/ 180)


UIImageView * shff = [UIImageView new];
    [shff setImage:[UIImage imageNamed:@"REPLACE_WITH_YOUR_IMAGE"]];
    [shff setBackgroundColor:[UIColor whiteColor]];
    [shff setClipsToBounds:true];
    [shff.layer setCornerRadius:SCREEN_HEIGHT/6];
    [shff setFrame:CGRectMake(SCREEN_HEIGHT/3/2, 100, SCREEN_HEIGHT/3, SCREEN_HEIGHT/3)];
    [self.view addSubview:shff];

    int radius = shff.frame.size.width/2+7;

    CAShapeLayer *arc = [CAShapeLayer layer];
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(shff.center.x, shff.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(-90) endAngle:DEGREES_TO_RADIANS(90) clockwise:YES].CGPath;


    arc.fillColor = [UIColor clearColor].CGColor;
    arc.strokeColor = [UIColor purpleColor].CGColor;
    arc.lineWidth = 15;
    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 45.0;
    drawAnimation.repeatCount         = 1.0;
    drawAnimation.removedOnCompletion = NO;
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.0f];
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
    [arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    gradientLayer.frame = self.view.frame;
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,(__bridge id)[UIColor blueColor].CGColor ];
    gradientLayer.startPoint = CGPointMake(0,0.5);
    gradientLayer.endPoint = CGPointMake(1,0.5);

    [self.view.layer addSublayer:gradientLayer];

    gradientLayer.mask = arc;

截图:

我刚刚更改了我的答案，所以现在可以使用了，只需使用度数到弧度的宏。此外，我刚刚在解决方案中添加了一个圆角线帽，并更改了开始和结束动画 % 帧。这现在应该可以顺利进行。

我做了一个不同的解决方案，只是为了 Sh%ts 和咯咯笑。这是使用发射器层的较新解决方案:

-(void)doGradientoutline {
    UIImageView * imageView = [UIImageView new];
    [imageView setImage:[UIImage imageNamed:@"df"]];
    [imageView setFrame:CGRectMake(SCREEN_WIDTH/2-imageView.image.size.width*3/2, SCREEN_HEIGHT/4, imageView.image.size.height*3, imageView.image.size.height*3)];
    [imageView setClipsToBounds:true];
    [imageView.layer setCornerRadius:imageView.frame.size.width/2];
    [self.view addSubview:imageView];

    int radius = imageView.frame.size.width/2+7;

    CAShapeLayer *arc = [CAShapeLayer layer];
    arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(imageView.center.x, imageView.center.y) radius:radius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(360) clockwise:YES].CGPath;

    arc.fillColor = [UIColor clearColor].CGColor;
    arc.strokeColor = [UIColor purpleColor].CGColor;
    arc.lineWidth = 15;
    [arc setLineCap:@"round"];

    CAEmitterLayer * _myEmitter = [CAEmitterLayer layer];

    _myEmitter.emitterPosition = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
    _myEmitter.emitterSize = CGSizeMake(1.0,1);
    _myEmitter.emitterMode = kCAEmitterLayerPoints;
    _myEmitter.emitterShape = kCAEmitterLayerSphere;
    _myEmitter.renderMode = kCAEmitterLayerOldestFirst;
    _myEmitter.shadowOpacity = 0.0;
    _myEmitter.shadowRadius = 0.0;
    _myEmitter.shadowOffset = CGSizeMake(-10.0,-10);
    _myEmitter.shadowColor = [[UIColor colorWithRed:1.00 green:1.00 blue:0.99 alpha:1.0] CGColor];

    CAEmitterCell * _myCell = [CAEmitterCell emitterCell];
    _myCell = [CAEmitterCell emitterCell];
    _myCell.name = @"_myCell";
    _myCell.beginTime = CACurrentMediaTime();
    _myCell.birthRate = 80;
    _myCell.lifetime = 8.0;
    _myCell.color = [[UIColor colorWithRed:0.1000 green:0.00 blue:0.5000 alpha:1.00] CGColor];
    _myCell.redSpeed = 1.10;
    _myCell.blueSpeed = 1.10;
    _myCell.alphaSpeed = 0;
    _myCell.redRange = 0.0;
    _myCell.blueRange = 0.0;
    _myCell.alphaRange = 0.0;
    _myCell.contents = (id)[[UIImage imageNamed:@"ffd.png"] CGImage];
    _myCell.emissionRange = 0.00;
    _myCell.emissionLatitude = 0.00;
    _myCell.emissionLongitude = 0.00;
    _myCell.velocity = 0.00;
    _myCell.velocityRange = 0.00;
    _myCell.spin = 2*M_PI;
    _myCell.spinRange = 2*M_PI;
    _myCell.scale = 1.5/ [[UIScreen mainScreen] scale];
    _myCell.scaleSpeed = 0.00;
    _myCell.scaleRange = 0.0;
    _myEmitter.emitterCells = [NSArray arrayWithObject:_myCell];

    CAKeyframeAnimation *particleAnimation = [CAKeyframeAnimation animationWithKeyPath:@"emitterPosition"];
    [particleAnimation setPath:arc.path];
    [particleAnimation setDuration:8.0];
    [particleAnimation setRepeatCount:HUGE_VAL];
    [particleAnimation setCalculationMode:kCAAnimationPaced];
    [_myEmitter addAnimation:particleAnimation forKey:@"yourAnimation"];

    CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    drawAnimation.duration            = 1.50;
    drawAnimation.repeatCount         = 1.0;
    drawAnimation.removedOnCompletion = NO;
    drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
    drawAnimation.toValue   = [NSNumber numberWithFloat:1.f];
    drawAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

    [self.view.layer addSublayer:_myEmitter];
}

您必须下载此图像并将其存储在您的包中才能使其正常工作，这不是标准图像，它使用 Adob​​e Illustrator 使用了几层发光，这是发射器发光的部分原因并更改颜色，只需单击下面的紫色模糊图像，您就可以右键单击并保存，然后导入到您的项目中。在您的 viewDidAppear 中调用上面的方法以无缝查看其工作原理，祝您好运:

新结果: