iOS的 - 如何繪製漸變沿路徑

Question

這是我想達到的效果是：

這是我現在有效果：

基本上，我需要沿着弧的路徑繪製漸變，而不是沿着弧線性地繪製。我嘗試了很多方法，其中一些產生了相同的結果，但其中一些產生了遠離預期的結果。

這是我現在有代碼：我也嘗試過改變的代碼塊

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; 

但是，我仍然可以得到類似的結果。

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