如何渲染徑向漸變到iPhone上的新UIImage上

Question

想知道如何渲染徑向漸變（點>圓圈）到新的UIImage（iphone）上。 我看到以下內容：

http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_shadings/dq_shadings.html

，它讓我覺得我需要使用CGShadingRef或CGGradientRef，並且使用的UIImage的「imageWithCGImage的構造函數從CG *去一個UIImage ...但我可以不知道如何。

任何建議非常感謝！

Answer 1

您應該在與鏈接部分相同的文檔中閱讀有關Graphics Contexts的文章。所有繪圖都發生在圖形上下文中。如果你想創建一個具有徑向漸變，或線性漸變，或其他任何圖像，你需要：

• 與UIGraphicsBeginImageContextWithOptions創建您的圖像的圖形上下文。
• 做任何你想要出現在圖像中的繪圖。
• 致電UIGraphicsGetImageFromCurrentImageContext從上下文中獲取圖像。這給你一個UIImage，所以不需要從CGImage轉換。
• 致電UIGraphicsEndImageContext清理上下文。

Answer 2

好這裏的工作解決方案的要點，讓我知道，如果我錯過了什麼（例如釋放手柄/引用）

也貼在我的博客：http://splinter.com.au/rendering-a-radial-gradient-on-the-iphone-obj

- (UIImage *)radialGradientImage:(CGSize)size start:(float)start end:(float)end centre:(CGPoint)centre radius:(float)radius { 
    // Render a radial background 
    // http://developer.apple.com/library/ios/#documentation/GraphicsImaging/Conceptual/drawingwithquartz2d/dq_shadings/dq_shadings.html 

    // Initialise 
    UIGraphicsBeginImageContextWithOptions(size, YES, 1); 

    // Create the gradient's colours 
    size_t num_locations = 2; 
    CGFloat locations[2] = { 0.0, 1.0 }; 
    CGFloat components[8] = { start,start,start, 1.0, // Start color 
     end,end,end, 1.0 }; // End color 

    CGColorSpaceRef myColorspace = CGColorSpaceCreateDeviceRGB(); 
    CGGradientRef myGradient = CGGradientCreateWithColorComponents (myColorspace, components, locations, num_locations); 

    // Normalise the 0-1 ranged inputs to the width of the image 
    CGPoint myCentrePoint = CGPointMake(centre.x * size.width, centre.y * size.height); 
    float myRadius = MIN(size.width, size.height) * radius; 

    // Draw it! 
    CGContextDrawRadialGradient (UIGraphicsGetCurrentContext(), myGradient, myCentrePoint, 
           0, myCentrePoint, myRadius, 
           kCGGradientDrawsAfterEndLocation); 

    // Grab it as an autoreleased image 
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 

    // Clean up 
    CGColorSpaceRelease(myColorspace); // Necessary? 
    CGGradientRelease(myGradient); // Necessary? 
    UIGraphicsEndImageContext(); // Clean up 
    return image; 
} 

Answer 3

你也可以在iOS5 +中使用CoreImage並使用Vignette Filter。

- (UIImage *)vignetteImageOfSize:(CGSize)size withImage:(UIImage *)image { 
    UIGraphicsBeginImageContextWithOptions(size, YES, 0); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor); 
    CGContextFillRect(context, CGRectMake(0.0, 0.0, size.width, size.height)); 

    CIImage *coreImage = [CIImage imageWithCGImage:image.CGImage]; 
    CGPoint origin = [coreImage extent].origin; 
    CGAffineTransform translation = 
    CGAffineTransformMakeTranslation(-origin.x, -origin.y); 
    coreImage = [coreImage imageByApplyingTransform:translation]; 

    CIFilter *vignette = [[CIFilter filterWithName:@"CIVignette"] retain]; 
    [vignette setValue:@1.5 forKey:@"inputRadius"]; 
    [vignette setValue:@1.5 forKey:@"inputIntensity"]; 
    [vignette setValue:coreImage forKey:@"inputImage"]; 

    UIImage *vignetteImage = [UIImage imageWithCIImage:vignette.outputImage]; 
    [vignette release]; 

    CGRect imageFrame = CGRectMake(0.0, 0.0, size.width, size.height); 
    [image drawInRect:imageFrame]; 
    UIImage *renderedImage = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 
    return renderedImage; 
} 

Answer 4

我在這裏寫這篇simplyfied方法，（把它變成一個UIImage類例子）

+ (UIImage *)radialGradientImageWithRadius:(CGFloat)radius StartColor:(UIColor*)startColor EndColor:(UIColor*)endColor ApplyScreenScale:(BOOL)useScreenScale 
{ 
    // Initialize 
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(radius * 2, radius * 2), NO, (useScreenScale ? 0.f : 1.f)); 

    CGContextRef context = UIGraphicsGetCurrentContext(); 

    // bottom glow gradient 
    CGColorSpaceRef colourspace = CGColorSpaceCreateDeviceRGB(); 

    // build color components 
    CGFloat red1 = 0.f, green1 = 0.f, blue1 = 0.f, alpha1 = 0.f; 
    [(startColor == nil ? [UIColor clearColor] : startColor) getRed:&red1 green:&green1 blue:&blue1 alpha:&alpha1]; 
    CGFloat red2 = 0.f, green2 = 0.f, blue2 = 0.f, alpha2 = 0.f; 
    [(endColor == nil ? [UIColor clearColor] : endColor) getRed:&red2 green:&green2 blue:&blue2 alpha:&alpha2]; 

    CGFloat cComponents[] = { red1, green1, blue1, alpha1, red2, green2, blue2, alpha2 }; 
    CGFloat cGlocations[] = { 0.f, 1.f }; 

    CGGradientRef gradient = CGGradientCreateWithColorComponents(colourspace, cComponents, cGlocations, 2); 
    CGPoint centerPoint = CGPointMake(radius, radius); 

    CGContextDrawRadialGradient(context, gradient, centerPoint, 0.f, centerPoint, radius , 0.f); 

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext(); 

    CGGradientRelease(gradient); 
    CGColorSpaceRelease(colourspace); 
    UIGraphicsEndImageContext(); 

    return image; 
} 

用法示例：

// resulting image size 128x128 px 
UIImage* myRadialImage = [UIImage radialGradientImageWithRadius:128.f StartColor:[UIColor greenColor] EndColor:nil ApplyScreenScale:NO]; 

// resulting image size 256x256 px on normal retina display, or 384x384 on iPhone 6 or gre 
UIImage* myRadialImage = [UIImage radialGradientImageWithRadius:128.f StartColor:[UIColor greenColor] EndColor:[UIColor redColor] ApplyScreenScale:YES]; 

希望這是有用的