在ios中的圖像上繪製漸變

Question

如何以編程方式創建漸變色看起來像下面的圖像。

Answer 1

當你說「應用它在圖像作爲漸變「，你的意思是作爲一個面具（揭示頂部的圖像，讓它淡化圖像t o底部透明）？如果是這樣的話，你可以應用梯度作爲掩模，使用CAGradientLayer：

CAGradientLayer *gradientMask = [CAGradientLayer layer]; 
gradientMask.frame = self.imageView.bounds; 
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor, 
         (id)[UIColor clearColor].CGColor]; 
self.imageView.layer.mask = gradientMask; 

---

上面做一個簡單的垂直梯度（因爲默認是垂直的，線性漸變）。但你問了startPoint,endPoint和locations。例如，如果，你就想你的面具水平應用，你會怎麼做：

gradientMask.startPoint = CGPointMake(0.0, 0.5); // start at left middle 
gradientMask.endPoint = CGPointMake(1.0, 0.5);  // end at right middle 

如果你想有兩個梯度，一個在第一個10％，另一個在最後的10％，你會怎麼做：

gradientMask.colors = @[(id)[UIColor clearColor].CGColor, 
         (id)[UIColor whiteColor].CGColor, 
         (id)[UIColor whiteColor].CGColor, 
         (id)[UIColor clearColor].CGColor]; 
gradientMask.locations = @[@0.0, @0.10, @0.90, @1.0]; 

---

如果您想通過本身（而不是作爲掩模）一個簡單的梯度，你會創建一個view，然後添加漸變層到它：

CAGradientLayer *gradient = [CAGradientLayer layer]; 
gradient.frame = view.bounds; 
gradient.colors = @[(id)[UIColor whiteColor].CGColor, 
        (id)[UIColor blackColor].CGColor]; 
[view.layer addSublayer:gradient]; 

請參閱CAGradientLayerclass reference。

Answer 2

-(void) drawGradientinBounds: (CGRect) currentBounds withColors:(NSArray*) colors andPercentages:(NSArray *)percentages andGradientDirectionIsVertical:(BOOL)isGradientDirectionVertical 
{ 

    CGContextRef currentContext = UIGraphicsGetCurrentContext(); 

    CGGradientRef glossGradient; 
    CGColorSpaceRef rgbColorspace; 

    size_t num_locations = [percentages count]; 
    CGFloat locations[num_locations]; 
    for(int i=0;i<num_locations;i++) 
     locations[i] = [[percentages objectAtIndex:i] floatValue]; 

    int comps = [colors count]*4; 
    CGFloat components[comps]; 
    for(int i = [colors count]-1;i>=0;i--) 
    { 
     comps--; 
     UIColor *c = [colors objectAtIndex:i]; 
     const CGFloat *cg = CGColorGetComponents([c CGColor]); 
     components[comps] = cg[3]; 
     comps--; 
     components[comps] = cg[2]; 
     comps--; 
     components[comps] = cg[1]; 
     comps--; 
     components[comps] = cg[0]; 
    } 

    rgbColorspace = CGColorSpaceCreateDeviceRGB(); 
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations); 

    CGPoint topCenter; 
    CGPoint endCenter; 

    if(isGradientDirectionVertical) 
    { 
     topCenter = CGPointMake(CGRectGetMidX(currentBounds), currentBounds.origin.y); 
     endCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetHeight(currentBounds)+currentBounds.origin.y); 

    } 
    else 
    { 
     topCenter = CGPointMake(currentBounds.origin.x,CGRectGetMidY(currentBounds)); 
     endCenter = CGPointMake(CGRectGetWidth(currentBounds)+currentBounds.origin.x,CGRectGetMidY(currentBounds)); 
    } 
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, endCenter, 0); 

    CGGradientRelease(glossGradient); 
    CGColorSpaceRelease(rgbColorspace); 
} 

和輸入這種方法是界限，colorArray：

[NSArray arrayWithObjects:[UIColor blackColor], [UIColor whiteColor], nil] 

percentageArray：

[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:1.0], nil] 

Answer 3

CAGradientLayer *gradient = [CAGradientLayer layer]; 
gradient.frame = self.view.bounds; 


gradient.startPoint = CGPointMake(1.0, 1.0); //Dark From bottom 
gradient.endPoint = CGPointMake(1.0, 0); 


gradient.colors = [NSArray arrayWithObjects: 
        (id)[[UIColor blackColor] CGColor], 
        (id)[[UIColor clearColor] CGColor], nil]; 


[self.view.layer insertSublayer:gradient atIndex:0]; 

Answer 4

我剛剛爲Swift 2.0寫了一個UIImage擴展。也許這有些用處。你可以用一個UIColor（任意數字）的數組和一個應該繪製漸變的框架來調用它。

extension UIImage { 

    class func convertGradientToImage(colors: [UIColor], frame: CGRect) -> UIImage { 

     // start with a CAGradientLayer 
     let gradientLayer = CAGradientLayer() 
     gradientLayer.frame = frame 

     // add colors as CGCologRef to a new array and calculate the distances 
     var colorsRef = [CGColor]() 
     var locations = [NSNumber]() 

     for i in 0 ... colors.count-1 { 
      colorsRef.append(colors[i].CGColor as CGColorRef) 
      locations.append(Float(i)/Float(colors.count-1)) 
     } 

     gradientLayer.colors = colorsRef 
     gradientLayer.locations = locations 

     // now build a UIImage from the gradient 
     UIGraphicsBeginImageContext(gradientLayer.bounds.size) 
     gradientLayer.renderInContext(UIGraphicsGetCurrentContext()!) 
     let gradientImage = UIGraphicsGetImageFromCurrentImageContext() 
     UIGraphicsEndImageContext() 

     // return the gradient image 
     return gradientImage 
    } 
} 

這樣稱呼它：

let colors = [ 
    UIColor.blueColor(), 
    UIColor.greenColor() 
    // and many more if you wish 
] 
let gradientImage = UIImage.convertGradientToImage(colors, frame: navigationBar.bounds) 

和應用具有：

.backgroundColor = UIColor(patternImage: gradientImage) 

或

.setBackgroundImage(gradientImage, forBarMetrics: .Default) 

Answer 5

這是最好的方法，爲我工作的要求

CAGradientLayer *gradientLayer = [CAGradientLayer layer]; 
gradientLayer.frame = yourImageView.layer.bounds; 

gradientLayer.colors = [NSArray arrayWithObjects: 
         (id)[UIColor colorWithWhite:1.0f alpha:1.0f].CGColor, 
         (id)[UIColor colorWithWhite:0.0f alpha:0.9f].CGColor, 
         nil]; 

gradientLayer.locations = [NSArray arrayWithObjects: 
          [NSNumber numberWithFloat:0.0f], 
          [NSNumber numberWithFloat:1.0f], 
          nil]; 

[yourImageView.layer addSublayer:gradientLayer];