创建一个具有多种颜色的圆圈答案

【问题标题】：Create a circle with multiple color创建一个具有多种颜色的圆圈
【发布时间】：2013-11-14 05:54:49
【问题描述】：

我正在开发一个 iphone 应用程序，我想创建一个具有多种颜色的圆圈。如下图所示

m 使用 draw rect 方法绘制一个圆，但没有多种颜色。

你能帮帮我吗？

提前致谢。

【问题讨论】：

可能对你有帮助stackoverflow.com/questions/17269586/…
@iPatel 我可以像饼图一样绘制，但我想在图像中绘制而不是顺时针。感谢您的帮助
你需要它来扩展吗？可以只使用带有 png 文件的 UIImageView 吗？
是的，我可以使用，但后来我也想慢慢改变这种颜色，然后 morphing@godel9

标签： ios iphone uiview

【解决方案1】：

您可以使用带有圆形遮罩的CAGradientLayer 来实现此效果。示例代码（假设您在某些视图控制器中使用它）：

- (void)viewDidLoad
{
    [super viewDidLoad];

    CAGradientLayer *glayer = [CAGradientLayer layer];
    glayer.frame = CGRectMake(60.0f, 60.0f, 200.0f, 200.0f);
    glayer.colors = @[(__bridge id)[UIColor greenColor].CGColor,
                      (__bridge id)[UIColor cyanColor].CGColor,
                      (__bridge id)[UIColor blueColor].CGColor,
                      (__bridge id)[UIColor purpleColor].CGColor,
                      (__bridge id)[UIColor redColor].CGColor,
                      (__bridge id)[UIColor orangeColor].CGColor,
                      (__bridge id)[UIColor yellowColor].CGColor];
    glayer.backgroundColor = [UIColor redColor].CGColor;
    CAShapeLayer *shLayer = [CAShapeLayer layer];
    [shLayer setPath:CGPathCreateWithEllipseInRect(CGRectMake(0, 0, 200, 200), NULL)];
    [glayer setMask:shLayer];
    [self.view.layer addSublayer: glayer];
}

请注意，CAGradientLayer 的 colors 和 locations 属性是可动画的，因此您可以使用该方法轻松添加动画效果

【讨论】：

我会尝试，如果完成，我一定会接受你的回答谢谢
@Vladimir 您的解决方案就像我的魅力一样。你能再帮我做一件事吗？我想慢慢地慢慢改变这种颜色。提前致谢
嗨@Vladimir 你能帮我回答一下下面的问题吗？ stackoverflow.com/questions/20016213/…提前致谢

【解决方案2】：

您可以尝试使用 QuartzCore 中的 CGGradientRef 和 CGContextDrawLinearGradient（不要忘记将 QuartzCore 添加到您的项目中并导入它）

创建渐变你可以使用类似的东西（在 UIView 子类中）：

- (void)drawRect:(CGRect)rect
{
        CGContextRef ctx = UIGraphicsGetCurrentContext();

        CGGradientRef gradient;
        CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();;

        //5 is for count of colors
        CGFloat parts[5] = { .2, .4, .6, .8, .1 };

        //colors for each part, so 5 parts by 4 each (r,g,b,a for each part in range 0 - 1, 1 is for 255 in regular rgb space, and alpha as usual)
        CGFloat components[20] = {
            .3, .24, .1, 1,
            .3, .2, .7, 1,
            .3, .84, .2, 1,
            .3, .24, .3, 1,
            .1, .5, .38, 1
        };

        gradient = CGGradientCreateWithColorComponents(rgb, components, parts, 5);

        CGPoint top = CGPointMake(CGRectGetMidX(rect), 0.0f);
        CGPoint bottom = CGPointMake(CGRectGetMidX(rect), rect.size.height);

        CGContextDrawLinearGradient(ctx, gradient, top, bottom, 0);

        CGGradientRelease(gradient);
        CGColorSpaceRelease(rgb);

        //round shape you can archive by Vladimir's solution
        CAShapeLayer *shLayer = [CAShapeLayer layer];
        [shLayer setPath:CGPathCreateWithEllipseInRect(CGRectInset(rect, 5, 5), NULL)];
        [self.layer setMask:shLayer];
}

【讨论】：

如果您决定使用 CGContext 进行绘制，您可以使用 CGContextClip 函数对其进行剪辑，而不是使用图层。但是使用 CGContext 你将无法轻松地将动画应用于渐变