目标C语言 如何在iphone上渲染径向梯度到一个新的UIImage上

Question

只是想知道如何渲染径向梯度(点>圆)到一个新的UIImage (iphone)。我看到了以下内容:

http://developer.apple.com/library/ios/文档/GraphicsImaging/概念/drawingwithquartz2d/dq_shadings dq_shadings.html

它让我认为我需要使用CGShadingRef或CGGradientRef，并使用UIImage的"imageWithCGImage"构造函数从CG*到UIImage…但我不知道怎么做。

任何建议都非常感谢!

Answer 1

好的，这是工作解决方案的要点，如果我错过了什么，请告诉我(例如释放句柄/引用)

也发表在我的博客: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 2

你也可以在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 3

您应该在您链接的部分的同一文档中阅读有关图形上下文的内容。所有绘图都发生在图形上下文中。如果你想创建一个有径向梯度，线性梯度，或其他任何东西的图像，你需要:

使用UIGraphicsBeginImageContextWithOptions为你的图像创建一个图形上下文。
• 做任何你想要出现在图像中的绘图。
• 调用UIGraphicsGetImageFromCurrentImageContext从上下文获取图像。这给你一个UIImage，所以不需要从CGImage转换。
• 调用UIGraphicsEndImageContext来清理上下文。

Answer 4

我在这里写了这个简化的方法，(例如，把它放在一个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]; 

希望对大家有用

Answer 5

为UIView设置径向渐变颜色，

梯度,

extension UIColor {
func colorWithRadialGradient(frame: CGRect, colors: [UIColor]) -> UIColor {
    if frame.width != 0.0 && frame.height != 0.0 {
        let backgroundGradientLayer = CAGradientLayer()
        backgroundGradientLayer.frame = frame
        let cgColors = colors.map({$0.cgColor})
        backgroundGradientLayer.colors = cgColors
        backgroundGradientLayer.type = kCAGradientLayerRadial
        backgroundGradientLayer.startPoint = CGPoint(x: 0.5, y: 0.1)
        UIGraphicsBeginImageContext(backgroundGradientLayer.bounds.size)
        backgroundGradientLayer.render(in: UIGraphicsGetCurrentContext()!)
        let backgroundColorImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return UIColor(patternImage: backgroundColorImage!)
    }
    return .clear
    }
}

(可选)用于外阴影，

extension UIView
{
func setGreenCircularShadow() {
    let greenGradient = [UIColor(red: 13/255.0, green: 160/255.0, blue: 110/255.0, alpha: 0.8),UIColor(red: 7/255.0, green: 200/255.0, blue: 128/255.0, alpha: 1.0),UIColor(red: 7/255.0, green: 200/255.0, blue: 128/255.0, alpha: 1.0), UIColor(red: 13/255.0, green: 160/255.0, blue: 110/255.0, alpha: 0.8)]
    self.backgroundColor        = UIColor().colorWithRadialGradient(frame: self.bounds, colors: greenGradient)
    self.layer.shadowColor      = UIColor(red: 7.0/255.0, green: 200.0/255.0, blue: 128.0/255.0, alpha: 1.0).cgColor
    self.layer.shadowOpacity    = 0.33
    self.layer.shadowOffset     = CGSize(width: 0, height: 5.0)
    self.layer.shadowRadius     = 10
    self.layer.shadowPath       = UIBezierPath(rect: self.bounds).cgPath
   }
}

SET ON UIVIEW，

view.layer.cornerRadius = 5.0
view.setGreenCircularShadow()