当前位置: 首页 > 面试题库 >

iOS-绘制渐变-Swift

曹驰
2023-03-14
问题内容

我正在尝试为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)

代码的结果:
我的结果照片


问题答案:

有一种更简单的方法来获取渐变作为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
}

要将渐变应用于文本,下一步需要使用作为textColorusing 返回的图像UIColor(patternImage: ...)。例如:

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)

结果是:

在此处输入图片说明

迅捷的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)


 类似资料:
  • 问题内容: 好的,我有这个代码 并且它将淡蓝色的背景绘制到屏幕上。我正在尝试创建一个渐变,该渐变从顶部的深蓝色到底部的浅蓝色。有没有简单的方法可以做到这一点?我是Libgdx和OpenGL的新手,所以我正尝试从书中学习,但我似乎找不到答案。我听说过要绘制一个大正方形并为顶点设置不同的颜色,但是我不确定该怎么做。 问题答案: 在libGDX中,ShapeRenderer对象包含一个方法,该方法为其位

  • 好的,这是我的代码。包装Mypanal;

  • 本文向大家介绍JavaScript+html5 canvas绘制渐变区域完整实例,包括了JavaScript+html5 canvas绘制渐变区域完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JavaScript+html5 canvas绘制渐变区域的方法。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: 更多关于js特效相关内容感兴趣的读者可查看本站专题:《

  • 本文向大家介绍Android使用自定义View绘制渐隐渐现动画,包括了Android使用自定义View绘制渐隐渐现动画的使用技巧和注意事项,需要的朋友参考一下 实现了一个有趣的小东西:使用自定义View绘图,一边画线,画出的线条渐渐变淡,直到消失。效果如下图所示: 用属性动画或者渐变填充(Shader)可以做到一笔一笔的变化,但要想一笔渐变(手指不抬起边画边渐隐),没在Android中找到现成的A

  • Another hard-to-write CSS3 feature is a gradient. You have to repeat long gradient definition multiple times with different vendor prefixes. Also, if you want to cover all gradient-supported browsers,

  • 使用渐变填充可以在要应用其他任何颜色时应用渐变颜色混和。创建渐变填色是在一个或多个对象间创建颜色平滑过渡的好方法。您可以将渐变存储为色板,从而便于将渐变应用于多个对象。 注:如果要创建颜色可以沿不同方向顺畅分布的单个多色对象,请使用网格对象。 要查看使用渐变来改进绘画的视频,请参阅 www.adobe.com/go/lrvid4017_ai_cn。有关创建渐变的教程,请参阅 “Unleash th