iOS - 如何沿路径绘制渐变

Posted 2023-03-12

【中文标题】iOS - 如何沿路径绘制渐变

【英文标题】：iOS - How to draw gradient along a path

【发布时间】：2017-07-20 10:17:44

【问题描述】：

这是我想要达到的效果：

这是我现在的效果：

基本上，我需要沿着弧线的路径绘制渐变，而不是直线地穿过弧线。我尝试了很多方法，其中一些产生了相同的结果，但其中一些产生了与预期相去甚远的结果。

这是我现在拥有的代码：

    CGFloat lineSize = 12;
    CGFloat radius = self.frame.size.width/2 - lineSize;

    CGContextRef ctx = UIGraphicsGetCurrentContext();

    //Define gradient
    CGFloat colors [] =
    
        0.9451f, 0.5804f, 0.2431f, 1.0f,
        0.9922f, 0.9490f, 0.9020f, 1.0f,
        1.0f, 1.0f, 1.0f, 1.0f,
        0.8706f, 0.9020f, 0.9412f, 1.0f,
        0.2941f, 0.6863f, 0.9176f, 1.0f
    ;

    CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 5);
    CGColorSpaceRelease(baseSpace), baseSpace = NULL;

    //Define arc angle and points
    CGFloat startAngle = 3.0f/4.0f * M_PI;
    CGFloat endAngle = 1.0f/4.0f * M_PI;

    CGFloat a = radius * cos(45);
    CGFloat o = a * tan(45);

    CGFloat y = CGRectGetMidY(rect) + o;

    CGPoint startPoint = CGPointMake(0, y);
    CGPoint endPoint = CGPointMake(self.frame.size.width, y);

    CGMutablePathRef arc = CGPathCreateMutable();
    CGPathAddArc(arc, NULL, CGRectGetMidX(rect), CGRectGetMidY(rect), radius,
                 startAngle, endAngle, NO);

    CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, 10, kCGLineCapButt, kCGLineJoinMiter, 10);

    CGContextAddPath(ctx, strokedArc);
    CGContextClip(ctx);

    CGContextDrawLinearGradient(ctx, gradient, startPoint, endPoint, 0);
    CGGradientRelease(gradient);

我也尝试更改此代码块：

CGMutablePathRef arc = CGPathCreateMutable();
    CGPathAddArc(arc, NULL, CGRectGetMidX(rect), CGRectGetMidY(rect), radius,
                 startAngle, endAngle, NO);

    CGPathRef strokedArc = CGPathCreateCopyByStrokingPath(arc, NULL, 10, kCGLineCapButt, kCGLineJoinMiter, 10);

    CGContextAddPath(ctx, strokedArc);
    CGContextClip(ctx);

    CGContextDrawLinearGradient(ctx, gradient, startPoint, endPoint, 0);
    CGGradientRelease(gradient);

到这个块代码：

CGContextAddArc(ctx, CGRectGetMidX(rect), CGRectGetMidY(rect), radius, startAngle, endAngle, NO);

CGContextSetLineWidth(ctx, lineSize);
CGContextSetLineCap(ctx, kCGLineCapRound);

CGContextReplacePathWithStrokedPath(ctx);
CGContextClip(ctx);

CGContextDrawLinearGradient(ctx, gradient, startPoint, endPoint, 0);
CGGradientRelease(gradient), gradient = NULL;

但仍然产生与我现在的结果相似的结果。

【参考方案1】：

尝试更改渐变值。

改变

 //Define gradient
    CGFloat colors [] =
    
        0.9451f, 0.5804f, 0.2431f, 1.0f,
        0.9922f, 0.9490f, 0.9020f, 1.0f,
        1.0f, 1.0f, 1.0f, 1.0f,
        0.8706f, 0.9020f, 0.9412f, 1.0f,
        0.2941f, 0.6863f, 0.9176f, 1.0f
    ;

对一些对称值。喜欢

    CGFloat colors [] =
    
        1.0f, 0.9176f, 0.6863f, 0.2941f,
        1.0f, 0.9412f, 0.9020f, 0.8706f,
        0.7432f, 1.0f, 1.0f, 0.7432f,
        0.8706f, 0.9020f, 0.9412f, 1.0f,
        0.2941f, 0.6863f, 0.9176f, 1.0f
    ;