平滑地应用渐变到UIImage

Question

我正在尝试使用CoreGraphic将渐变应用于UIImage; 但是,我得到的结果并不是很好.我想在图像的底部创建一个黑色到透明的渐变,为我创建一个对比,让我放置一些文本.然而,我能够的渐变与图像不能很好地融合; 你可以清楚地看到中心的分离.我正在寻找的结果就像这个应用程序:http://capptivate.co/2014/02/17/yummly-3/ 我应该如何应用渐变来实现这一目标？(我必须将其应用于大量图像).

我的结果:

这是我的代码:

func imageWithGradient(img:UIImage!) -> UIImage{

    UIGraphicsBeginImageContext(img.size)
    var context = UIGraphicsGetCurrentContext()

    img.drawAtPoint(CGPointMake(0, 0))

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let locations:[CGFloat] = [0.50, 1.0]
    //1 = opaque
    //0 = transparent
    let bottom = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5).CGColor
    let top = UIColor(red: 0, green: 0, blue: 0, alpha: 0).CGColor

    let gradient = CGGradientCreateWithColors(colorSpace,
        [top, bottom], locations)


    let startPoint = CGPointMake(img.size.width/2, 0)
    let endPoint = CGPointMake(img.size.width/2, img.size.height)

    CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0)

    let image = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return image
}

Answer 1

SWIFT 3

func imageWithGradient(img:UIImage!) -> UIImage {

    UIGraphicsBeginImageContext(img.size)
    let context = UIGraphicsGetCurrentContext()

    img.draw(at: CGPoint(x: 0, y: 0))

    let colorSpace = CGColorSpaceCreateDeviceRGB()
    let locations:[CGFloat] = [0.0, 1.0]

    let bottom = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5).cgColor
    let top = UIColor(red: 0, green: 0, blue: 0, alpha: 0).cgColor

    let colors = [top, bottom] as CFArray

    let gradient = CGGradient(colorsSpace: colorSpace, colors: colors, locations: locations)

    let startPoint = CGPoint(x: img.size.width/2, y: 0)
    let endPoint = CGPoint(x: img.size.width/2, y: img.size.height)

    context!.drawLinearGradient(gradient!, start: startPoint, end: endPoint, options: CGGradientDrawingOptions(rawValue: UInt32(0)))

    let image = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    return image!
}

Answer 2

我在 Swift 游乐场中尝试过这一点，我无法复制您所描述的确切问题，但是这里有一些您可以尝试的建议。

您可以更改在渐变中设置停止点的方式，我认为不使用停止点移动渐变，而是移动起点，即从垂直中心开始，而不是从顶部边缘开始，会更有意义，像这样的

UIGraphicsBeginImageContext(image.size)
var context = UIGraphicsGetCurrentContext()

image.drawAtPoint(CGPointMake(0, 0))

let colorSpace = CGColorSpaceCreateDeviceRGB()
let locations:[CGFloat] = [0.0, 1.0]
let bottom = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5).CGColor
let top = UIColor(red: 0, green: 0, blue: 0, alpha: 0).CGColor

let gradient = CGGradientCreateWithColors(colorSpace,
               [top, bottom], locations)

let startPoint = CGPointMake(image.size.width / 2, image.size.height / 2)
let endPoint = CGPointMake(image.size.width / 2, image.size.height)
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0)

let finalImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

请注意，位置现在为 0 和 1，而startPointy 坐标已向下移动。

或者，将传递视为kCGGradientDrawsBeforeStartLocation的一个选项CGContextDrawLinearGradient，因为这也可能会产生影响。