微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

ios – 根据百分比用渐变颜色填充圆环.

分类：iOS作者：编程之家AI导航网
寻找我的问题的解决方案,我必须在环中填充颜色.
我可以用我的代码填充一个颜色,但我遇到了一些问题

>使用此代码,我无法找到如何在圆圈中填充所需的颜色数量,即20％,40％,70％等.
>当我给出渐变色时,它不是如图所示.

我正在使用的代码：

int radius = 130;

CAShapeLayer *arc = [CAShapeLayer layer];
arc.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100,0) radius:radius startAngle:39.8 endAngle:19.9 clockwise:YES].CGPath;

arc.position = CGPointMake(CGRectGetMidX(self.frame)-radius,CGRectGetMidY(self.frame)-radius);

arc.fillColor = [UIColor clearColor].CGColor;
arc.strokeColor = [UIColor redColor].CGColor;
arc.linewidth = 25;
CABasicAnimation *drawAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
drawAnimation.duration            = 5.0; // "animate over 10 seconds or so.."
drawAnimation.repeatCount         = 1.0;  // Animate only once..
drawAnimation.removedOnCompletion = NO;   // Remain stroked after the animation..
drawAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
drawAnimation.tovalue   = [NSNumber numberWithFloat:100.0f];
drawAnimation.timingFunction = [camediatimingFunction functionWithName:kcamediatimingFunctionEaseIn];
[arc addAnimation:drawAnimation forKey:@"drawCircleAnimation"];

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
UIColor *gradientColor = [UIColor colorWithRed:0.51 green:0.0 blue:0.49 alpha:1.0];

NSArray *gradientColors = [NSArray arrayWithObjects:
                           (id)[UIColor blueColor].CGColor,(id)gradientColor.CGColor,(id)[UIColor redColor].CGColor,nil];
CGFloat gradientLocations[] = {0,0.5,1};
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,(CFArrayRef)gradientColors,gradientLocations);

gradientLayer.colors = (__bridge NSArray *)(gradient);

gradientLayer.startPoint = CGPointMake(0.0,0.7);
gradientLayer.endPoint = CGPointMake(1,-0.1);
[self.layer addSublayer:gradientLayer];
gradientLayer.mask = arc;

重要提示：颜色必须如图所示

我正在为这个问题寻找非常具体的答案.

在此之前,感谢所有有时间调查的人.

解决方法

要使用颜色填充圆的数量,您必须在填充图层的顶部绘制轮廓并仅剪切填充的图层.

为了使渐变跟随圆,您必须将其划分为多个分段线性渐变.由于您提供的图形已经有一些带轮廓的线段,我们可以使用这些轮廓来隐藏任何不完美的连接不同的渐变.

我举了一个例子,如果你想更多地控制颜色,你可以为CircleGradientLayer中的每个段设置它们.通过设置CircleProgressView的progress属性来控制绘制的进度.

如果你在这里看到我的答案,可以用两个圆圈和一些线条来简化绘制轮廓：https://stackoverflow.com/a/24580817/3659846但是在编写此代码时,复制和粘贴速度更快;)

.h文件中没什么特别的,只是插入编译器想要的东西,我只在这里发布.m：

CircleProgressView

@implementation CircleProgressView{
    CircleGradientLayer *_gradientLayer;
    CircleOutlineLayer *_outlineLayer;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor clearColor];

        int numSegments = 7;
        CGFloat circleRadius = 130;
        CGFloat circleWidth = 30;

        NSDictionary *circleData = @{
                                    @"numberOfSegments":@(numSegments),@"circleRadius":@(circleRadius),@"circleWidth":@(circleWidth)
                                    };

        _gradientLayer = [CircleGradientLayer layer];
        _gradientLayer.contentsScale = 2;
        _gradientLayer.frame = self.bounds;
        [_gradientLayer setCircleData:circleData];
        [_gradientLayer setNeedsdisplay];
        [self.layer addSublayer:_gradientLayer];

        _outlineLayer = [CircleOutlineLayer layer];
        _outlineLayer.frame = self.bounds;
        _outlineLayer.contentsScale = 2;
        [_outlineLayer setCircleData:circleData];
        [_outlineLayer setNeedsdisplay];
        [self.layer addSublayer:_outlineLayer];

        self.progress = 1;
    }
    return self;
}

- (void)setProgress:(CGFloat)progress{
    _progress = MAX(0,MIN(1,progress));
    _gradientLayer.progress = progress;
}

@end

CircleGradientLayer

@implementation CircleGradientLayer{
    int _numSegments;
    CGFloat _circleRadius;
    CGFloat _circleWidth;

    CAShapeLayer *_maskLayer;
}

+(id)layer{
    CircleGradientLayer *layer = [[CircleGradientLayer alloc] init];
    return layer;
}

-(void)setCircleData:(NSDictionary*)data{
    _numSegments = [data[@"numberOfSegments"] intValue];
    _circleRadius = [data[@"circleRadius"] doubleValue];
    _circleWidth = [data[@"circleWidth"] doubleValue];

    [self createMask];
}

- (void)createMask{
    _maskLayer = [CAShapeLayer layer];
    _maskLayer.frame = self.bounds;

    CGFloat angleStep = 2*M_PI/(_numSegments+1);
    CGFloat startAngle = angleStep/2 + M_PI_2;
    CGFloat endAngle = startAngle+_numSegments*angleStep+0.005; //add a bit that the outline is not clipped

    _maskLayer.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(self.bounds),CGRectGetMidY(self.bounds)) radius:_circleRadius startAngle:startAngle endAngle:endAngle clockwise:YES].CGPath;
    _maskLayer.fillColor = [UIColor clearColor].CGColor;
    _maskLayer.strokeColor = [UIColor redColor].CGColor;
    _maskLayer.linewidth = 2*_circleWidth+2; //stroke is centered -> *2 to cover all

    self.mask = _maskLayer;
}

- (void)setProgress:(CGFloat)progress{
    _progress = MAX(0,progress));
    _maskLayer.strokeEnd = _progress;
}

-(void)drawInContext:(CGContextRef)ctx{
   // would get better gradient joints by not using antialias,but since they are hidden,it is not needed to adjust it     
   // CGContextSetAllowsAntialiasing(ctx,NO);

    UIGraphicsPushContext(ctx);

    //some values to adjust the circle
    UIColor *startColor = [UIColor colorWithRed:1 green:0 blue:21/255. alpha:1];
    UIColor *endColor = [UIColor colorWithRed:0 green:180/255. blue:35/255. alpha:1];

    CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.bounds),CGRectGetMidY(self.bounds));

    //calculate startAngle and the increment between segements
    CGFloat angleStep = 2*M_PI/(_numSegments+1);
    CGFloat startAngle = angleStep/2 + M_PI_2;

    //convert colors to hsv
    CGFloat startHue,startSat,startBrightness,startAlpha;
    CGFloat endHue,endSat,endBrightness,endAlpha;
    [startColor getHue:&startHue saturation:&startSat brightness:&startBrightness alpha:&startAlpha];
    [endColor getHue:&endHue saturation:&endSat brightness:&endBrightness alpha:&endAlpha];
    if(endHue<startHue)
        endHue+=1;


    //draw the segments
    for(int i=0;i<_numSegments;i++){
        //calcualte segment startColor
        CGFloat hue = startHue+((endHue-startHue)*i)/_numSegments;
        if(hue>1)
            hue-=1;

        CGFloat brightness = startBrightness+((endBrightness-startBrightness)*i)/(_numSegments);
        if(_numSegments==7){
            //just increasing the brighness a bit to get more yellow like on your picture ;)
            brightness = i>3?startBrightness+((endBrightness-startBrightness)*(i-4))/(_numSegments-4):startBrightness;
        }
        UIColor *fromColor = [UIColor colorWithHue:hue saturation:startSat+((endSat-startSat)*i)/_numSegments brightness:brightness alpha:startAlpha+((endAlpha-startAlpha)*i)/_numSegments];

        //calculate segement endColor
        hue = startHue+((endHue-startHue)*(i+1))/_numSegments;
        if(hue>1)
            hue-=1;
        brightness = startBrightness+((endBrightness-startBrightness)*i)/(_numSegments);
        if(_numSegments==7){
            brightness = i>3?startBrightness+((endBrightness-startBrightness)*(i-3))/(_numSegments-4):startBrightness;
        }

        UIColor *toColor = [UIColor colorWithHue:hue saturation:startSat+((endSat-startSat)*(i+1))/_numSegments brightness:brightness alpha:startAlpha+((endAlpha-startAlpha)*(i+1))/_numSegments];

        //actually draw the segment
        [self drawSegmentAtCenter:centerPoint from:startAngle to:startAngle+angleStep radius:_circleRadius width:_circleWidth startColor:fromColor endColor:toColor];

        startAngle+=angleStep;
    }

    //start clearing the inside
    CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeClear);

    UIBezierPath* innerPath = [UIBezierPath bezierPath];
    [innerPath movetoPoint:centerPoint];
    [innerPath addArcWithCenter:centerPoint radius:_circleRadius-_circleWidth-0.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [innerPath fill];
}

- (void)drawSegmentAtCenter:(CGPoint)center from:(CGFloat)startAngle to:(CGFloat)endAngle radius:(CGFloat)radius width:(CGFloat)width startColor:(UIColor *)startColor endColor:(UIColor*)endColor{

    CGContextSaveGState(UIGraphicsGetCurrentContext());

    //apply a clip arc for the gradient
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path movetoPoint:center];
    [path addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    [path addClip];


    //draw the gradient
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    CGFloat locations[] = { 0.0,1.0 };
    NSArray *colors = @[(__bridge id) startColor.CGColor,(__bridge id) endColor.CGColor];
    CGGradientRef gradient = CGGradientCreateWithColors(colorSpace,(__bridge CFArrayRef) colors,locations);

    CGPoint startPoint = CGPointMake(center.x-sinf(startAngle-M_PI_2)*radius,center.y+cosf(startAngle-M_PI_2)*radius);
    CGPoint endPoint = CGPointMake(center.x-sinf(endAngle-M_PI_2)*radius,center.y+cosf(endAngle-M_PI_2)*radius);
    CGContextDrawLinearGradient(UIGraphicsGetCurrentContext(),gradient,startPoint,endPoint,kCGGradientDrawsAfterEndLocation|kCGGradientDrawsBeforeStartLocation);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(colorSpace);

    CGContextRestoreGState(UIGraphicsGetCurrentContext());
}

@end

CircleOutlineLayer

@implementation CircleOutlineLayer{
    int _numSegments;
    CGFloat _circleradius;
    CGFloat _circlewidth;    
}

+(id)layer{
    CircleOutlineLayer *layer = [[CircleOutlineLayer alloc] init];
    return layer;
}

-(void)setCircleData:(NSDictionary*)data{
    _numSegments = [data[@"numberOfSegments"] intValue];
    _circleradius = [data[@"circleRadius"] doubleValue];
    _circlewidth = [data[@"circleWidth"] doubleValue];
}

-(void)drawInContext:(CGContextRef)ctx{
    UIGraphicsPushContext(ctx);

    //some values to adjust the circle
    [[UIColor colorWithWhite:130/255. alpha:1] setstroke]; //the outline color

    CGPoint centerPoint = CGPointMake(CGRectGetMidX(self.bounds),CGRectGetMidY(self.bounds));

    //calculate startAngle and the increment between segements
    CGFloat angleStep = 2*M_PI/(_numSegments+1);
    CGFloat startAngle = angleStep/2 + M_PI_2;

    //draw the segments
    for(int i=0;i<_numSegments;i++){
         //actually draw the segment
        [self drawSegmentAtCenter:centerPoint from:startAngle to:startAngle+angleStep radius:_circleradius width:_circlewidth doFill:NO];

        startAngle+=angleStep;
    }

    //draw an inner outline
    UIBezierPath *innerPath = [UIBezierPath bezierPath];
    [innerPath movetoPoint:centerPoint];
    [innerPath addArcWithCenter:centerPoint radius:_circleradius-_circlewidth startAngle:0 endAngle:2*M_PI clockwise:YES];
    [innerPath stroke];


    //start clearing the inside
    CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModeClear);

    innerPath = [UIBezierPath bezierPath];
    [innerPath movetoPoint:centerPoint];
    [innerPath addArcWithCenter:centerPoint radius:_circleradius-_circlewidth-0.5 startAngle:0 endAngle:2*M_PI clockwise:YES];
    [innerPath fill];

    //also clear a whole segment at the bottom to get rid of the inner outline
    [self drawSegmentAtCenter:centerPoint from:-angleStep/2 + M_PI_2 to:angleStep/2+M_PI_2 radius:_circleradius width:_circlewidth doFill:YES];


    //redraw the outlines at begin and end of circle since beginning was just cleared and end-outline hasn't been drawed
    CGContextSetBlendMode(UIGraphicsGetCurrentContext(),kCGBlendModenormal);

    CGPoint startPoint = CGPointMake(centerPoint.x+sinf(-angleStep/2)*(_circleradius),centerPoint.y+cosf(-angleStep/2)*(_circleradius));
    CGPoint endPoint = CGPointMake(centerPoint.x+sinf(-angleStep/2)*(_circleradius-_circlewidth),centerPoint.y+cosf(-angleStep/2)*(_circleradius-_circlewidth));
    CGContextSetlinewidth(UIGraphicsGetCurrentContext(),1);
    CGContextMovetoPoint(UIGraphicsGetCurrentContext(),startPoint.x,startPoint.y);
    CGContextAddLinetoPoint(UIGraphicsGetCurrentContext(),endPoint.x,endPoint.y);
    CGContextstrokePath(UIGraphicsGetCurrentContext());

    startPoint = CGPointMake(centerPoint.x+sinf(angleStep/2)*(_circleradius),centerPoint.y+cosf(angleStep/2)*(_circleradius));
    endPoint = CGPointMake(centerPoint.x+sinf(angleStep/2)*(_circleradius-_circlewidth),centerPoint.y+cosf(angleStep/2)*(_circleradius-_circlewidth));
    CGContextMovetoPoint(UIGraphicsGetCurrentContext(),endPoint.y);
    CGContextstrokePath(UIGraphicsGetCurrentContext());
}

- (void)drawSegmentAtCenter:(CGPoint)center from:(CGFloat)startAngle to:(CGFloat)endAngle radius:(CGFloat)radius width:(CGFloat)width doFill:(BOOL)fill{

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path movetoPoint:center];
    [path addArcWithCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES];
    if(fill)
        [path fill];
    [path stroke];

}

@end

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

iOS开发-UITabbarController的介绍与使用
UITabBarController 是 iOS 中用于管理和显示选项卡界面的一个视图控制器。它允许用户在多个视图控制器之间进行切换，每个视图控制器对应一个选项卡。 主要功能 管理多个视图控制器： UITabBarController 管理一个视图控制器数组，每个视图控制器对应一个选项卡。 显示选项
iOS开发-UITableView的重用机制
UITableView的重用机制避免了频繁创建和销毁单元格的开销，使得在显示大量数据时，保持流畅的用户体验和较低的资源消耗。。 当UITableView滚动时，屏幕上移出视图的单元格会被回收到一个重用池中。当需要显示新的单元格时，UITableView会首先检查重用池中是否有可用的单元格。如果有，就
iOS开发-属性的内存管理
Objective-C中，类的实例变量（instance variables）和属性（properties）是两种不同的概念，其中属性的内存管理就较为复杂。Objective-C 提供了多种属性修饰符，用于管理对象的内存。这些修饰符用于控制对象的生命周期和内存管理行为。 以下是一些常见的属性修饰符及
OC-从内存角度理解block可作为方法传入参数的原因
从内存管理的角度来看，block可以作为方法的传入参数是因为block在Objective-C中被设计为一种特殊的对象，它们可以在堆（heap）上分配和管理。这使得block可以像其他对象一样被传递、复制和持有。以下是一些关键点，解释为什么block可以作为方法的传入参数： 1. Block的类型和
iOS开发-WKWebView的介绍与基本使用
WKWebView 是 iOS 开发中用于显示网页内容的组件，它是在 iOS 8 中引入的，作为 UIWebView 的替代品。WKWebView 提供了更高的性能和更多的功能，它是基于 WebKit 引擎的，这也是 Safari 浏览器所使用的引擎。 主要特性 性能提升：相比于老旧的 UIWebV
iOS开发-多线程编程
OC中常用的多线程编程技术： 1. NSThread NSThread是Objective-C中最基本的线程抽象，它允许程序员直接管理线程的生命周期。 NSThread *myThread = [[NSThread alloc] initWithTarget:self selector:@selec
iOS开发- Xcode常用的快捷键
以下是一些常用的 Xcode 快捷键： 构建和运行: Command + B: 构建当前项目。 Command + R: 构建并运行当前项目。 Command + .: 停止运行项目。 代码编辑: Command + ] / Command + [: 增加或减少当前行或选中代码的缩进。 Contro
iOS面试题-tableivew上面展示图片的时候，在网络还未回来时，将cell滑走，那被划走的cell还会不会显示图片？
当在UITableViewCell中加载网络图片时，如果在图片下载完成之前用户滑动了UITableView，使得对应的UITableViewCell已经滑出屏幕，那么这个被滑走的UITableViewCell是否还会显示图片，取决于如何处理图片的加载和UITableViewCell的重用。 UITa
iOS开发-手势
UIGestureRecognizer 用于检测和处理手势的抽象基类。提供了检测用户手势的基本功能，如点按、滑动、捏合、旋转等。通过使用 UIGestureRecognizer 子类，可以为视图添加手势识别功能，增强用户交互体验。 常见的 UIGestureRecognizer 子类 一些常见的手势
iOS开发-图片UIImage
UIImage 和 UIImageView 是 iOS 开发中常用的两个类，分别用于表示图像数据和显示图像。 UIImage UIImage 是一个表示图像数据的类，可以从文件、数据、图像资源库等加载图像。UIImage 支持多种图像格式，包括 PNG、JPEG、GIF 等。 创建 UIImage
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native