Question

我想用渐变作为图像绘制循环进度视图：

我尝试了以下代码，但结果颜色不正确。这是我的代码：

   //draw gradient

    CGFloat colors [] = {
        1.0, 0.7,
        0.2, 0.4

    };

    CGFloat locations[] = { 0.0, 1.0 };


    CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceGray(); // gray colors want gray color space


    CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, locations, 2);
    CGColorSpaceRelease(baseSpace), baseSpace = NULL;

    CGContextSaveGState(context);
    CGContextAddPath(context, progressPath);
    CGContextClip(context);

    CGRect boundingBox = CGPathGetBoundingBox(progressPath);
    CGPoint gradientStart = CGPointMake(0.0, CGRectGetMinY(boundingBox));
    CGPoint gradientEnd   = CGPointMake(1.0, CGRectGetMaxY(boundingBox));

    CGContextDrawLinearGradient(context, gradient, gradientStart, gradientEnd, 0);
    CGGradientRelease(gradient), gradient = NULL;
    CGContextRestoreGState(context);

progressPath是带颜色的进度线：

[UIColor colorWithRed:21/255.0f green:182/255.0f blue:217/255.0f alpha:1.0]

更新：

这是我的代码生成的图片：Result Image 结果图像设计不一样，颜色也不一样。我不知道为什么。

请帮我纠正一下。提前谢谢。

Answer 1

您正在寻找的渐变类型，其颜色随着围绕中心点的角度而变化，称为角度渐变。遗憾的是，iOS没有内置的方法来绘制角度渐变，但您可以使用开源库（如paiv/AngleGradientLayer）来实现。

Answer 2

工作代码：

- (void) setGradientWithFrame:(CGRect)frame
{
    //create the gradient
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = frame;
    //this example is white-black gradient, change it to the color you want..
    gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor whiteColor] CGColor], (id)[[UIColor blackColor] CGColor], nil];
    gradient.cornerRadius = frame.size.height/2.0f;
    [self.view.layer insertSublayer:gradient atIndex:0];

    CALayer *whiteCircle = [CALayer layer];
    whiteCircle.frame = CGRectMake(frame.origin.x + 10, frame.origin.y + 10, frame.size.width - 20, frame.size.height - 20);
    whiteCircle.backgroundColor = [[UIColor whiteColor] CGColor];
    whiteCircle.cornerRadius = whiteCircle.frame.size.width/2.0f;
    [self.view.layer insertSublayer:whiteCircle atIndex:1];

    CALayer *whitesquare = [CALayer layer];
    whitesquare.frame = CGRectMake(50, frame.size.height - 20, 25, 25);
    whitesquare.backgroundColor = [[UIColor whiteColor] CGColor];
    whitesquare.transform = CATransform3DMakeRotation(-20.0 / 180.0 * M_PI, 0.0, 0.0, 1.0);
    [self.view.layer insertSublayer:whitesquare atIndex:2];
}

调用方法：

[self setGradientWithFrame:CGRectMake(0, 0, 100, 100)];

PS。将颜色更改为渐变颜色到您想要的颜色：

如何在iOS中绘制渐变

2 个答案: