Применение градиента к UIImage плавно

Question

Я пытаюсь применить градиент к UIImage, используя CoreGraphic; однако результат, который я получил, не очень хорош. Я хочу создать градиент от черного к прозрачному в нижней части изображения, чтобы создать для меня контраст для размещения текста. Тем не менее, градиент, который я смог, не очень хорошо сочетается с изображением; Вы можете ясно видеть разделение в центре. Результат, который я ищу, похож на это приложение: 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, а startPoint координата у сместилась вниз.

Или посмотрите на прохождение kCGGradientDrawsBeforeStartLocation как вариант CGContextDrawLinearGradient, поскольку это также может иметь значение.