创建一个具有多种颜色的圆形。

Question

我正在开发一款iPhone应用程序，希望创建一个带有多种颜色的圆形。如下图所示： 我正在使用绘制矩形法绘制圆形，但是无法实现多种颜色。

请问您能帮我吗？

提前感谢您。

- Maul

---

这可能对您有帮助：https://dev59.com/1nPYa4cB1Zd3GeqPlqnz - iPatel

@iPatel，我可以像画饼图一样绘制，但我想要像图片中那样逆时针绘制。感谢您的帮助。 - Maul

你需要它进行缩放吗？你可以使用带有PNG文件的UIImageView吗？ - godel9

可以，我现在可以使用，但是以后我也想慢慢改变这个颜色并进行渐变。@godel9 - Maul

Answer 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

---

我会尝试，如果完成了，我一定会接受你的答案。谢谢。 - Maul

@Vladimir，你的解决方案对我非常有效。你能否再帮我一个忙？我想慢慢地改变这个颜色。提前感谢。 - Maul

嗨@Vladimir，你能否回答下面的问题？https://dev59.com/NHnZa4cB1Zd3GeqPnDW5 非常感谢。 - Maul

Answer 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];
}

- in.disee

---

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