I'm trying to draw a gradient to UILabel, but it draws only the colors I can't see the text.
I saw the code from here StackOverflow
my modification:
extension String{
func gradient(x:CGFloat,y:CGFloat, fontSize:CGFloat)->UIImage{
let font:UIFont = UIFont.systemFontOfSize(fontSize)
let name:String = NSFontAttributeName
let textSize: CGSize = self.sizeWithAttributes([name:font])
let width:CGFloat = textSize.width // max 1024 due to Core Graphics limitations
let height:CGFloat = textSize.height // max 1024 due to Core Graphics limitations
UIGraphicsBeginImageContext(CGSizeMake(width, height))
let context = UIGraphicsGetCurrentContext()
UIGraphicsPushContext(context!)
//draw gradient
let glossGradient:CGGradientRef?
let rgbColorspace:CGColorSpaceRef?
let num_locations:size_t = 2
let locations:[CGFloat] = [ 0.0, 1.0 ]
let components:[CGFloat] = [(202 / 255.0), (197 / 255.0), (52 / 255.0), 1.0, // Start color
(253 / 255.0), (248 / 255.0), (101 / 255.0), 1.0] // End color
rgbColorspace = CGColorSpaceCreateDeviceRGB()
glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations)
let topCenter = CGPointMake(0, 0);
let bottomCenter = CGPointMake(0, textSize.height);
CGContextDrawLinearGradient(context, glossGradient, topCenter, bottomCenter, CGGradientDrawingOptions.DrawsBeforeStartLocation)
UIGraphicsPopContext()
let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return gradientImage
}
}
and the setup of the imageView
self.timeLeftIV = UIImageView(frame: CGRectMake(self.pyramidFakeView.frame.origin.x/2-25,0, 100,20))
self.timeLeftIV.image = "59:48".gradient(timeLeftIV.frame.origin.x, y: timeLeftIV.frame.origin.y, fontSize: 6.0)
the result of the code:
There is an easier way of getting a gradient as a UIImage. You can use a CAGradientLayer. For example:
func yellowGradientImage(bounds:CGRect) -> UIImage
{
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor(red: (202 / 255.0), green: (197 / 255.0), blue: (52 / 255.0), alpha: 1.0).CGColor, UIColor(red: (253 / 255.0), green: (248 / 255.0), blue: (101 / 255.0), alpha: 1.0).CGColor]
gradientLayer.bounds = bounds
UIGraphicsBeginImageContextWithOptions(gradientLayer.bounds.size, true, 0.0)
let context = UIGraphicsGetCurrentContext()
gradientLayer.renderInContext(context!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image
}
To apply the gradient to text you next need to use the image returned as the textColor using UIColor(patternImage: ...). For example:
let label = UILabel()
label.font = UIFont.systemFontOfSize(150.0)
label.text = "HELLO WORLD"
label.sizeToFit()
let image = yellowGradientImage(label.bounds)
label.textColor = UIColor(patternImage: image)
Which results in:
swift 3.0:
func yellowGradientImage(bounds:CGRect) -> UIImage
{
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor(red: (202 / 255.0), green: (197 / 255.0), blue: (52 / 255.0), alpha: 1.0).cgColor, UIColor(red: (253 / 255.0), green: (248 / 255.0), blue: (101 / 255.0), alpha: 1.0).cgColor]
gradientLayer.bounds = bounds
UIGraphicsBeginImageContextWithOptions(gradientLayer.bounds.size, true, 0.0)
let context = UIGraphicsGetCurrentContext()
gradientLayer.render(in: context!)
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
let label = UILabel()
label.font = UIFont.systemFont(ofSize: 150.0)
label.text = "HELLO WORLD"
label.sizeToFit()
let image = yellowGradientImage(bounds: label.bounds)
label.textColor = UIColor(patternImage: image)
add a view, modify draw rect with below code.
override func drawRect(rect: CGRect) {
// Drawing code
let currentContext = UIGraphicsGetCurrentContext()
CGContextSaveGState(currentContext);
let colorSpace = CGColorSpaceCreateDeviceRGB()
let startColor = UIColor(red: 0.1, green: 0.0, blue: 0.0, alpha: 0.0)
let startColorComponents = CGColorGetComponents(startColor.CGColor)
let middleColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.2)
let middleColorComponents = CGColorGetComponents(middleColor.CGColor)
let lowerMiddleColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3)
let lowerMiddleColorComponents = CGColorGetComponents(lowerMiddleColor.CGColor)
let endColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.5)
let endColorComponents = CGColorGetComponents(endColor.CGColor)
var colorComponents = [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], middleColorComponents[0], middleColorComponents[1], middleColorComponents[2], middleColorComponents[3], lowerMiddleColorComponents[0], lowerMiddleColorComponents[1], lowerMiddleColorComponents[2], lowerMiddleColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]]
var locations:[CGFloat] = [0.0, 0.6, 0.8, 1.0]
let gradient = CGGradientCreateWithColorComponents(colorSpace,&colorComponents,&locations,4)
let startPoint = CGPointMake(0, 0)
let endPoint = CGPointMake(0, self.bounds.height)
CGContextAddRect(currentContext, CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height));
CGContextClip(currentContext);
CGContextDrawLinearGradient(currentContext,gradient,startPoint,endPoint, CGGradientDrawingOptions.DrawsBeforeStartLocation)
CGContextRestoreGState(currentContext)
}
Now in storyboard add a view change class to your gradient class and add a label to this view.
See if it works for you.
Related
How can I convert this code to SwiftUI. It's a snow effect. I used CAEmitterLayer but I don't know how to use it in SwfitUI. There is no addSublayer in SwiftUI. Is it possible to run this code without using UIHostingController ?
let size = CGSize(width: 824.0, height: 1112.0)
let host = UIView(frame: CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height))
self.view.addSubview(host)
let particlesLayer = CAEmitterLayer()
particlesLayer.frame = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
host.layer.addSublayer(particlesLayer)
host.layer.masksToBounds = true
particlesLayer.backgroundColor = UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
particlesLayer.emitterShape = .circle
particlesLayer.emitterPosition = CGPoint(x: 509.4, y: 707.7)
particlesLayer.emitterSize = CGSize(width: 1648.0, height: 1112.0)
particlesLayer.emitterMode = .surface
particlesLayer.renderMode = .oldestLast
let image1 = UIImage(named: "logo")?.cgImage
let cell1 = CAEmitterCell()
cell1.contents = image1
cell1.name = "Snow"
cell1.birthRate = 92.0
cell1.lifetime = 20.0
cell1.velocity = 59.0
cell1.velocityRange = -15.0
cell1.xAcceleration = 5.0
cell1.yAcceleration = 40.0
cell1.emissionRange = 180.0 * (.pi / 180.0)
cell1.spin = -28.6 * (.pi / 180.0)
cell1.spinRange = 57.2 * (.pi / 180.0)
cell1.scale = 0.06
cell1.scaleRange = 0.3
cell1.color = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0).cgColor
particlesLayer.emitterCells = [cell1]
Here is a solution. Tested with Xcode 11.4 / iOS 13.4
struct EmitterView: UIViewRepresentable {
func makeUIView(context: Context) -> UIView {
let size = CGSize(width: 824.0, height: 1112.0)
let host = UIView(frame: CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height))
let particlesLayer = CAEmitterLayer()
particlesLayer.frame = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)
host.layer.addSublayer(particlesLayer)
host.layer.masksToBounds = true
particlesLayer.backgroundColor = UIColor(red: 0.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0).cgColor
particlesLayer.emitterShape = .circle
particlesLayer.emitterPosition = CGPoint(x: 509.4, y: 707.7)
particlesLayer.emitterSize = CGSize(width: 1648.0, height: 1112.0)
particlesLayer.emitterMode = .surface
particlesLayer.renderMode = .oldestLast
let image1 = UIImage(named: "logo")?.cgImage
let cell1 = CAEmitterCell()
cell1.contents = image1
cell1.name = "Snow"
cell1.birthRate = 92.0
cell1.lifetime = 20.0
cell1.velocity = 59.0
cell1.velocityRange = -15.0
cell1.xAcceleration = 5.0
cell1.yAcceleration = 40.0
cell1.emissionRange = 180.0 * (.pi / 180.0)
cell1.spin = -28.6 * (.pi / 180.0)
cell1.spinRange = 57.2 * (.pi / 180.0)
cell1.scale = 0.06
cell1.scaleRange = 0.3
cell1.color = UIColor(red: 255.0/255.0, green: 255.0/255.0, blue: 255.0/255.0, alpha: 1.0).cgColor
particlesLayer.emitterCells = [cell1]
return host
}
func updateUIView(_ uiView: UIView, context: Context) {
}
typealias UIViewType = UIView
}
struct TestEmitterLayer: View {
var body: some View {
EmitterView() // << usage !!
}
}
var navigationImageView:UIImageView! = UIImageView()
navigationImageView.frame = (0,0,320,64)
var gradient = CAGradientLayer()
let gradientDark = UIColor(red: 148/255.0, green:210/255.0, blue: 245/255.0, alpha: 1.0)
let gradientLight = UIColor(red: 222/255.0, green:247/255.0, blue: 230/255.0, alpha: 1.0)
let gradientLight1 = UIColor(red: 245/255.0, green:247/255.0, blue: 206/255.0, alpha: 1.0)
gradient.frame = navigationImageView.bounds
let color1 = gradientDark.cgColor
let color2 = gradientLight.cgColor
let color3 = gradientLight1.cgColor
gradient.colors = [color1, color2, color3]
gradient.colors = [gradientDark.cgColor,gradientLight.cgColor,gradientLight1.cgColor];
navigationImageView.layer.insertSublayer(gradient, at: 0)
Its not working... How to se the cgradient image backgorund colour?
You can make image from gradient and set it in imageView
let gradient = CAGradientLayer()
let screenWidth = UIScreen.main.bounds.size.width
let defaultNavigationBarFrame = CGRect(x: 0, y: 0, width: screenWidth, height: 64)
gradient.frame = defaultNavigationBarFrame
//colors
let gradientDark = UIColor(red: 148/255.0, green:210/255.0, blue: 245/255.0, alpha: 1.0)
let gradientLight = UIColor(red: 222/255.0, green:247/255.0, blue: 230/255.0, alpha: 1.0)
let gradientLight1 = UIColor(red: 245/255.0, green:247/255.0, blue: 206/255.0, alpha: 1.0)
gradient.colors = [gradientDark.cgColor,gradientLight.cgColor,gradientLight1.cgColor]
// Create image.
let imageBG: UIImage = self.gradientImage(fromLayer: gradient)
If you want to set it in navigation bar.
self.navigationController?.navigationBar.setBackgroundImage(imageBG,
for: .default)
Create image from gradient.
func gradientImage(fromLayer layer: CALayer) -> UIImage {
UIGraphicsBeginImageContext(layer.frame.size)
layer.render(in: UIGraphicsGetCurrentContext()!)
let outputImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return outputImage!
}
I want to color from touchpoint of gradient layer.
I tried this :
func viewtap(sender: UITapGestureRecognizer) {
let touchPoint = sender.locationInView(self.gradientview) // Change to whatever view you want the point for
print("\(touchPoint))")
colorOfPoint(touchPoint)
}
This method I used but it gives original color only.
func colorOfPoint(point:CGPoint) -> UIColor
{
let colorSpace:CGColorSpace = CGColorSpaceCreateDeviceRGB()!
let bitmapInfo = CGBitmapInfo(rawValue: CGImageAlphaInfo.PremultipliedLast.rawValue)
var pixelData:[UInt8] = [0, 0, 0, 0]
let context = CGBitmapContextCreate(&pixelData, 1, 1, 8, 4, colorSpace, bitmapInfo.rawValue)
CGContextTranslateCTM(context, -point.x, -point.y);
self.view.layer.renderInContext(context!)
let red:CGFloat = CGFloat(pixelData[0])/CGFloat(255.0)
let green:CGFloat = CGFloat(pixelData[1])/CGFloat(255.0)
let blue:CGFloat = CGFloat(pixelData[2])/CGFloat(255.0)
let alpha:CGFloat = CGFloat(pixelData[3])/CGFloat(255.0)
let color:UIColor = UIColor(red: red, green: green, blue: blue, alpha: alpha)
colorChange.tintColor = UIColor(red: red, green: green, blue: blue, alpha: alpha)
return color
}
Gradient Layer:
Always give .CGColor after uicolor. now i will pick color from any in UIView
let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.shadowview.bounds
let colorTop = UIColor(red:CGFloat(RedColor)/255.0 , green: CGFloat (GreenColor)/255.0 , blue: CGFloat(BlueColor)/255.0,alpha: CGFloat(alphalab)/255.0)**.CGColor**
let colorBottom = UIColor(red: 35.0/255.0, green: 2.0/255.0, blue: 2.0/255.0, alpha: 1.0)**.CGColor**
colorChange.tintColor = UIColor(red:CGFloat(RedColor)/255.0 , green: CGFloat (GreenColor)/255.0 , blue: CGFloat(BlueColor)/255.0,alpha: CGFloat(alphalab)/255.0)
gradientLayer.colors = [colorTop, colorBottom]
gradientLayer.startPoint = CGPoint(x: 1.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.locations = [ 0.0, 1.0]
self.shadowview.layer.addSublayer(gradientLayer)
I am trying to add a CAGradientLayer to a CAShapeLayer, but the gradient is not conforming to the shape of the layer. Instead, the gradient is taking the shape of the UIView itself. I originally attempted this with a UIBezierPath but it did not work either. I am trying to put a gradient into my shape.
override func drawRect(rect: CGRect) {
let bounds = CGRect(x: 0, y: 0, width: self.bounds.width, height: self.bounds.height)
let center = self.center
let path = CAShapeLayer()
path.bounds = bounds
path.position = CGPoint(x: center.x, y: center.y)
//path.backgroundColor = UIColor.redColor().CGColor
path.cornerRadius = 20
//self.layer.addSublayer(path)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = path.bounds
gradientLayer.colors = [cgColorForRed(209.0, green: 0.0, blue: 0.0),
cgColorForRed(255.0, green: 102.0, blue: 34.0),
cgColorForRed(255.0, green: 218.0, blue: 33.0),
cgColorForRed(51.0, green: 221.0, blue: 0.0),
cgColorForRed(17.0, green: 51.0, blue: 204.0),
cgColorForRed(34.0, green: 0.0, blue: 102.0),
cgColorForRed(51.0, green: 0.0, blue: 68.0)]
gradientLayer.startPoint = CGPoint(x:0,y:0)
gradientLayer.endPoint = CGPoint(x:0, y:1)
path.insertSublayer(gradientLayer, atIndex: 1)
self.layer.addSublayer(path)
}
func cgColorForRed(red: CGFloat, green: CGFloat, blue: CGFloat ) -> AnyObject {
return UIColor(red: red/255.0, green: green/255.0, blue: blue/255.5, alpha: 1.0).CGColor as AnyObject
}
Originally I had path defined to be a UIBezierPath of a rectangle with rounded corners which I am looking to fill with the gradient:
let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
fillColor.setFill()
path.fill()
path.lineWidth = self.lineWidth
UIColor.blackColor().setStroke()
path.stroke()
Edit from Larcerax's response:
class Thermometer: UIView {
//#IBInspectable var fillColor: UIColor = UIColor.greenColor()
let lineWidth: CGFloat = 2
override func drawRect(rect: CGRect) {
let context = UIGraphicsGetCurrentContext()
let svgid = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [cgColorForRed(209.0, green: 0.0, blue: 0.0),
cgColorForRed(255.0, green: 102.0, blue: 34.0),
cgColorForRed(255.0, green: 218.0, blue: 33.0),
cgColorForRed(51.0, green: 221.0, blue: 0.0),
cgColorForRed(17.0, green: 51.0, blue: 204.0),
cgColorForRed(34.0, green: 0.0, blue: 102.0),
cgColorForRed(51.0, green: 0.0, blue: 68.0)], [0,1])
CGContextSaveGState(context)
let insetRect = CGRectInset(rect, lineWidth / 2, lineWidth / 2)
let path = UIBezierPath(roundedRect: insetRect, cornerRadius: 10)
path.addClip()
CGContextDrawLinearGradient(context, svgid, CGPoint(x: 0, y: path.bounds.height),
CGPoint(x: path.bounds.width, y: path.bounds.height),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
}
You can try something like the following set up in order to produce the following shape, this is just an example to show you the setup, but this should do it:
let context = UIGraphicsGetCurrentContext()
let gradientColor3 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor4 = UIColor(red: 0.000, green: 1.000, blue: 0.000, alpha: 1.000)
let sVGID_1_2 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor3.CGColor, gradientColor4.CGColor], [0, 1])
CGContextSaveGState(context)
CGContextTranslateCTM(context, 198.95, 199.4)
CGContextRotateCTM(context, -30 * CGFloat(M_PI) / 180)
var polygonPath = UIBezierPath()
polygonPath.moveToPoint(CGPointMake(0, -145.95))
polygonPath.addLineToPoint(CGPointMake(126.4, -72.98))
polygonPath.addLineToPoint(CGPointMake(126.4, 72.97))
polygonPath.addLineToPoint(CGPointMake(0, 145.95))
polygonPath.addLineToPoint(CGPointMake(-126.4, 72.98))
polygonPath.addLineToPoint(CGPointMake(-126.4, -72.97))
polygonPath.closePath()
CGContextSaveGState(context)
polygonPath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_2,
CGPointMake(-126.4, -72.97),
CGPointMake(126.41, 72.99),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
to produce this:
If this doesn't work, then tell me, I will try to fix it up to make it work.
Also, here's just a simple rectangle:
let context = UIGraphicsGetCurrentContext()
let gradientColor = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor2 = UIColor(red: 0.988, green: 0.933, blue: 0.129, alpha: 1.000)
let gradientColor3 = UIColor(red: 1.000, green: 0.000, blue: 1.000, alpha: 1.000)
let sVGID_1_3 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor.CGColor, gradientColor2.CGColor, gradientColor3.CGColor], [0, 0.43, 1])
let rectanglePath = UIBezierPath(rect: CGRectMake(68, 28, 78.4, 78.4))
CGContextSaveGState(context)
rectanglePath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_3,
CGPointMake(68, 67.19),
CGPointMake(146.38, 67.19),
UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
CGContextRestoreGState(context)
here's a function to try out, you'll have to mess around with the colors, but you can input a frame:
class func drawStuff(#frame: CGRect) {
let context = UIGraphicsGetCurrentContext()
let gradientColor = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor2 = UIColor(red: 0.988, green: 0.933, blue: 0.129, alpha: 1.000)
let gradientColor3 = UIColor(red: 1.000, green: 0.000, blue: 1.000, alpha: 1.000)
let sVGID_1_4 = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [gradientColor.CGColor, gradientColor2.CGColor, gradientColor3.CGColor], [0, 0.43, 1])
let rectangleRect = CGRectMake(frame.origin.x, frame.origin.y, frame.size.width, frame.size.height)
let rectanglePath = UIBezierPath(rect: rectangleRect)
CGContextSaveGState(context)
rectanglePath.addClip()
CGContextDrawLinearGradient(context, sVGID_1_4, CGPointMake(rectangleRect.minX, rectangleRect.midY),CGPointMake(rectangleRect.maxX, rectangleRect.midY), 0)
CGContextRestoreGState(context)
}
Or you can just use this written by myself :) https://github.com/BilalReffas/SwiftyGradient
Swift 4 version of the first shape from #Loxx answer above which produces this output:
.
private func drawShape() {
guard let context = UIGraphicsGetCurrentContext() else {
print("No context, handle me")
return
}
let gradientColor3 = UIColor(red: 1.000, green: 1.000, blue: 1.000, alpha: 1.000)
let gradientColor4 = UIColor(red: 0.000, green: 1.000, blue: 0.000, alpha: 1.000)
guard let sVGID_1_2 = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: [gradientColor3.cgColor, gradientColor4.cgColor] as CFArray, locations: [0, 1]) else {
print("No gradient, handle me")
context.restoreGState()
return
}
context.saveGState()
context.translateBy(x: 198.95, y: 199.4)
context.rotate(by: -30 * CGFloat(Double.pi) / 180)
let polygonPath = UIBezierPath()
polygonPath.move(to: CGPoint(x: 0, y: -145.95))
polygonPath.addLine(to: CGPoint(x: 126.4, y: -72.98))
polygonPath.addLine(to: CGPoint(x: 126.4, y: 72.97))
polygonPath.addLine(to: CGPoint(x: 0, y: 145.95))
polygonPath.addLine(to: CGPoint(x: -126.4, y: 72.98))
polygonPath.addLine(to: CGPoint(x: -126.4, y: -72.97))
polygonPath.close()
context.saveGState()
polygonPath.addClip()
context.drawLinearGradient(sVGID_1_2,
start: CGPoint(x: -126.4, y: -72.97),
end: CGPoint(x: 126.41, y: 72.99),
options: [.drawsBeforeStartLocation, .drawsAfterEndLocation])
context.restoreGState()
}
I'm posting it because basically every line has changed in conversion to Swift 4 and it took a while to convert it just to check if it works.
I am trying to apply gradient to UIImage using CoreGraphic; however, the result I got is not very nice. I want to create a black to transparent gradient at the bottom of the image to create a contrast for me to place some text. However, the gradient I was able doesn't blend well with the image; you can clearly see the separation in the center. The result I am looking for is like this application: http://capptivate.co/2014/02/17/yummly-3/
How should I apply the gradient to achieve this? ( I have to apply this to large quantity of images ).
My Result:
Here is my 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
}
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!
}
I tried this out in a Swift playground, I couldn't replicate the exact issue you are describing, however here are some suggestions that you could try.
You could change the way you set up the stops in the gradient, I think it would make more sense to instead of shifting the gradient using the stops, shift the start point, i.e instead of starting from the top edge, start from the vertical center, something like this
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()
Notice locations is now 0 and 1, while the startPoint y coordinate has shifted downwards.
Alternatively, look at passing kCGGradientDrawsBeforeStartLocation as an option to CGContextDrawLinearGradient, as that could also make a difference.