iOS - 繪製漸變 - 斯威夫特

Question

我想繪製一個漸變到UILabel，但它只繪製顏色，我看不到文字。 我看到的代碼從這裏StackOverflow

我的修改：

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

和的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) 

代碼的結果的設置：

Answer 1

有一個簡單的方法獲得梯度爲UIImage。您可以使用CAGradientLayer。例如：

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 
} 

要應用漸變成文本接下來您需要使用使用UIColor(patternImage: ...)返回的圖像爲textColor。例如：

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) 

導致：

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) 

Answer 2

添加視圖，用下面的代碼修改繪製矩形。

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

現在在故事板中添加一個視圖更改類到您的漸變類並向此視圖添加標籤。

看看它是否適合你。