使用UIImageView图层的边框宽度的颜色填充进度

我有UIImageView，我已经使它成为一个宽度层的圆圈，就像在这个图像：

用户可以更新图片并上传新图片，图片上传时我有一个进度callback。 我想要的是在图像上传时用颜色animation边框，例如当用户点击上传边框从绿色开始，根据进度填充宽度。

我试着用这个代码：

CAShapeLayer *circle = [CAShapeLayer layer]; circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointZero radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath; circle.fillColor = [UIColor clearColor].CGColor; circle.strokeColor = [UIColor greenColor].CGColor; circle.lineWidth = 4; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; animation.duration = 10; animation.removedOnCompletion = NO; animation.fromValue = @(0); animation.toValue = @(1); animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [circle addAnimation:animation forKey:@"drawCircleAnimation"]; [imageView.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)]; [imageView.layer addSublayer:circle]; 

但它显示了错误的位置的圆，这aproch没有取得进展，它是静态的有没有办法根据进度填充UIImageView的图层的边界宽度？

Answer 1

UIImageView是为了显示图像。 我不会build议改变它的行为。 即使你inheritance了UIImageView并试图在其中绘制东西，它的drawRect也不会被调用。 让imageView是imageView ，剩下的就是使用UIView ，我build议你UIView ，然后在其中绘制一条贝塞尔path，并为贝塞尔path曲线设置animation，之后你可以将图像视图添加到uiview中。

UIView子类：

 - (void)drawRect:(CGRect)rect { [self drawImageHolderViewFrame:rect startAngle:_startAngle]; } - (void)drawImageHolderViewFrame: (CGRect)frame startAngle: (CGFloat)startAngle { CGRect ovalRect = CGRectMake(CGRectGetMinX(frame) , CGRectGetMinY(frame) , frame.size.width-10, frame.size.height-10); UIBezierPath* ovalPath = [UIBezierPath bezierPath]; [ovalPath addArcWithCenter: CGPointMake(CGRectGetMidX(ovalRect), CGRectGetMidY(ovalRect)) radius: CGRectGetWidth(ovalRect) / 2 startAngle: -91 * M_PI/180 endAngle: -startAngle * M_PI/180 clockwise: YES]; [UIColor.redColor setStroke]; ovalPath.lineWidth = 2; [ovalPath stroke]; } 

viewController类：

 -(void)viewDidAppear:(BOOL)animated{ [super viewDidAppear:animated]; _imageHolderView=[[MyView alloc]initWithFrame:CGRectMake(20, 20, 100, 100)]; _imageHolderView.startAngle=90; _imageHolderView.backgroundColor=[UIColor clearColor]; [self.view addSubview: _imageHolderView]; [self startTImer]; } -(void)startTImer{ NSTimer *timer=[NSTimer scheduledTimerWithTimeInterval:0.02 target:self selector:@selector(animateBorder) userInfo:nil repeats:YES]; } -(void)animateBorder{ if (_startAngle<=-270) { _startAngle=90; } _startAngle--; _imageHolderView.startAngle=_startAngle; [_imageHolderView setNeedsDisplay]; } 

这会给你：

现在，您可以将imageview作为子视图添加到刚刚创build的视图中。

Answer 2

请尝试下面的代码：

 CAShapeLayer *circle = [CAShapeLayer layer]; circle.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(29, 29) radius:27 startAngle:-M_PI_2 endAngle:2 * M_PI - M_PI_2 clockwise:YES].CGPath; circle.fillColor = [UIColor clearColor].CGColor; circle.strokeColor = [UIColor greenColor].CGColor; circle.lineWidth = 4; CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; animation.duration = 10; animation.removedOnCompletion = NO; animation.fromValue = @(0); animation.toValue = @(1); animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]; [circle addAnimation:animation forKey:@"drawCircleAnimation"]; [imageCircle.layer.sublayers makeObjectsPerformSelector:@selector(removeFromSuperlayer)]; [imageCircle.layer addSublayer:circle];