Anwenden von Farbverlauf auf UIImage reibungslos

Question

Ich versuche, Gradient auf UIImage mit CoreGraphic anzuwenden; das Ergebnis, das ich bekommen habe, ist jedoch nicht sehr nett. Ich möchte einen schwarzen bis transparenten Farbverlauf am unteren Bildrand erstellen, um einen Kontrast für die Platzierung von Text zu schaffen. Der Gradient, den ich konnte, passt jedoch nicht gut zum Bild. können Sie deutlich die Trennung in der Mitte sehen. Das Ergebnis, das ich suche, ist wie diese Anwendung: http://capptivate.co/2014/02/17/yummly-3/ Wie sollte ich den Gradienten anwenden, um dies zu erreichen? (Ich muss dies auf eine große Anzahl von Bildern anwenden).

Mein Ergebnis:

Hier ist mein Code:

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

ich dies in einem Swift Spielplatz ausprobiert, kann ich nicht das genaue Problem replizieren Sie beschreiben, aber Hier sind einige Vorschläge, die Sie ausprobieren könnten.

Sie könnten die Art und Weise ändern, wie Sie die Stopps in der Steigung einrichten, ich denke, es wäre sinnvoller, anstatt den Gradienten mit den Stopps zu verschieben, den Startpunkt zu verschieben, dh statt von der oberen Kante zu starten von der vertikalen Mittel, etwa wie folgt Orten

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() 

Hinweis ist jetzt 0 und 1, während der startPoint y nach unten verschoben hat koordinieren.

Alternativ betrachten Sie kCGGradientDrawsBeforeStartLocation als Option zu CGContextDrawLinearGradient, da dies auch einen Unterschied machen könnte.

Answer 2

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! 
}