使用石英填充PNG的漸變

Question

如何使用線性漸變填充PNG UIImage的非透明區域？我想爲MKAnnotationView重用一個PNG形狀，但更改每個註釋的屬性的漸變。

Answer 1

要使用的圖像作爲梯度的掩模（即，具有在圖像的非透明像素的形狀的梯度），可以：

• 創建具有一個簡單的視圖漸變（您可以創建一個簡單的UIView並使用下面顯示的addGradientLayerToView爲其提供漸變，或者您可以預先創建漸變PNG並將其添加到您的包中）。

• 適用您的PNG作爲掩模到梯度觀點：

  UIImage *mask = [UIImage imageNamed:@"mask.png"]; 
  CALayer *maskLayer = [CALayer layer]; 
  maskLayer.frame = CGRectMake(0, 0, mask.size.width, mask.size.height); 
  maskLayer.contents = (id)[mask CGImage]; 
  gradientViewToMask.layer.mask = maskLayer; 
  

---

應用漸變的透明像素，您可以：

1. 創建帶有漸變的新圖像：

   - (UIImage *)imageWithGradient:(UIImage *)image 
   { 
       UIGraphicsBeginImageContextWithOptions(image.size, NO, 1.0); 
   
       CGContextRef context = UIGraphicsGetCurrentContext(); 
   
       size_t locationCount = 2; 
       CGFloat locations[2] = { 0.0, 1.0 }; 
       CGFloat components[8] = { 0.0, 0.8, 0.8, 1.0, // Start color 
              0.9, 0.9, 0.9, 1.0 }; // End color 
   
       CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB(); 
   
       CGGradientRef gradient = CGGradientCreateWithColorComponents (colorspace, components, locations, locationCount): 
   
       CGPoint startPoint = CGPointMake(0.0, 0.0); 
       CGPoint endPoint = CGPointMake(0.0, image.size.height); 
       CGContextDrawLinearGradient (context, gradient, startPoint, endPoint, 0); 
   
       CGContextTranslateCTM(context, 0, image.size.height); 
       CGContextScaleCTM(context, 1.0, -1.0); 
   
       CGContextDrawImage(context, CGRectMake(0.0, 0.0, image.size.width, image.size.height), [image CGImage]); 
   
       UIImage *gradientImage = UIGraphicsGetImageFromCurrentImageContext(); 
       UIGraphicsEndImageContext(); 
   
       CGGradientRelease(gradient); 
       CGColorSpaceRelease(colorspace); 
   
       return gradientImage; 
   } 
   

2. 您還可以將CAGradientLayer添加到視圖中，然後將UIImageView作爲該視圖的子視圖添加。

   - (void)addGradientLayerToView:(UIView *)view 
   { 
       CAGradientLayer *gradient = [CAGradientLayer layer]; 
       gradient.frame = view.bounds; 
       gradient.colors = @[(id)[[UIColor colorWithRed:0.0 green:0.8 blue:0.8 alpha:1.0] CGColor], 
            (id)[[UIColor colorWithRed:0.9 green:0.9 blue:0.9 alpha:1.0] CGColor]]; 
       [view.layer insertSublayer:gradient atIndex:0]; 
   } 
   

   請注意，您必須#import <QuartzCore/QuartzCore.h>以及QuartzCore框架添加到您的項目。

Answer 2

我結束了的Rob的代碼的某些位和一個擴展的UIImage我發現在http://coffeeshopped.com/2010/09/iphone-how-to-dynamically-color-a-uiimage

+ (UIImage *)imageNamed:(NSString *)name withGradient:(CGGradientRef)gradient 
{ 
    // load the image 
    UIImage *img = [UIImage imageNamed:name]; 

    // begin a new image context, to draw our colored image onto 
    UIGraphicsBeginImageContextWithOptions(img.size, NO, [[UIScreen mainScreen] scale]); 

    // get a reference to that context we created 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    // translate/flip the graphics context (for transforming from CG* coords to UI* coords 
    CGContextTranslateCTM(context, 0, img.size.height); 
    CGContextScaleCTM(context, 1.0, -1.0); 

    // set the blend mode to overlay, and the original image 
    CGContextSetBlendMode(context, kCGBlendModeOverlay); 
    CGRect rect = CGRectMake(0, 0, img.size.width, img.size.height); 

    // set a mask that matches the shape of the image, then draw (overlay) a colored rectangle 
    CGContextClipToMask(context, rect, img.CGImage); 
    CGContextAddRect(context, rect); 

    //gradient 
    CGPoint startPoint = CGPointMake(0.0, img.size.height); 
    CGPoint endPoint = CGPointMake(0.0, 0.0); 
    CGContextDrawLinearGradient (context, gradient, startPoint, endPoint, 0); 

    // generate a new UIImage from the graphics context we drew onto 
    UIImage *coloredImg = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    CGGradientRelease(gradient); 

    //return the color-burned image 
    return coloredImg; 

}