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

Swift中的径向渐变背景

乔鸿骞
2023-03-14
问题内容

我一直在尝试产生基本的径向渐变背景,但没有成功。我设法获得了线性渐变,如下面的代码所示,但是我不知道如何使用不同的颜色使其呈放射状-
如下图所示。任何帮助将不胜感激。:)

    let gradientLayer: CAGradientLayer = CAGradientLayer()
    gradientLayer.colors = gradientColors
    gradientLayer.locations = gradientLocations ...

在此处输入图片说明

在此处输入图片说明


问题答案:

看看我的RadialGradientLayer的实现,可以随时对其进行修改

class RadialGradientLayer: CALayer {

   override init(){

        super.init()

        needsDisplayOnBoundsChange = true
    }

     init(center:CGPoint,radius:CGFloat,colors:[CGColor]){

        self.center = center
        self.radius = radius
        self.colors = colors

        super.init()

    }

    required init(coder aDecoder: NSCoder) {

        super.init()

    }

    var center:CGPoint = CGPointMake(50,50)
    var radius:CGFloat = 20
    var colors:[CGColor] = [UIColor(red: 251/255, green: 237/255, blue: 33/255, alpha: 1.0).CGColor , UIColor(red: 251/255, green: 179/255, blue: 108/255, alpha: 1.0).CGColor]

    override func drawInContext(ctx: CGContext!) {

        CGContextSaveGState(ctx)

        var colorSpace = CGColorSpaceCreateDeviceRGB()

        var locations:[CGFloat] = [0.0, 1.0]

        var gradient = CGGradientCreateWithColors(colorSpace, colors, [0.0,1.0])

        var startPoint = CGPointMake(0, self.bounds.height)
        var endPoint = CGPointMake(self.bounds.width, self.bounds.height)

        CGContextDrawRadialGradient(ctx, gradient, center, 0.0, center, radius, 0)

    }

}

就我而言,我只需要使用两种颜色,如果需要更多颜色,则需要修改中location声明的数组drawInContext。同样,在从此类创建对象之后,请不要忘记调用它,setNeedsDisplay()否则它将无法正常工作。有时我还需要不同的大小渐变,所以这就是为什么您必须在初始值设定项中传递半径参数以及渐变中心的原因



 类似资料:
  • 问题内容: 我不知道如何在按钮上设置背景渐变(不使背景渐变成为图像)。这与Android截然不同。 这是我必须定义一个可返回的渐变方案的类: 我可以使用以下方法设置整个视图的背景: 但是,如何访问按钮的视图并插入子层或类似内容? 问题答案: 您的代码工作正常。您只需要记住每次都要设置渐变的帧。最好仅使渐变类别也为您设置视图的框架。 这样,您就不会忘记,它也很好。 按钮是视图。对其应用渐变的方式与将

  • 我试图创建一个带有径向渐变的按钮,但每次我加载应用程序时,它都会崩溃。 mylayout.xml: 我的按钮。xml: 下面是错误日志。我的目标是Android SDK 22。 致命的例外:主java。lang.RuntimeException:无法启动活动组件信息{com.my.app/com.my.app.MyActivity}:android。看法充气异常:二进制XML文件行#324:在an

  • SVG 径向渐变 - radialGradient <radialGradient> 元素用来定义一个径向渐变,和前面一样,它也必须包含在 <defs> 定义标签中。 实例代码1 - 椭圆 代码解释 <radialGradient> 标签的id属性定义了该渐变的唯一标识名称 cx, cy 和 r 属性定义了最外面的圆,fx 和

  • 渐变背景也是CSS3 的新特性,通过它可以在不使用图像的情况下,创建从一种颜色到另一种颜色的过渡。使用渐变的好处是,可以减少对图像的依赖,进而降低浏览网页时的带宽消耗,提高网站的访问速度。 渐变,就是两种或多种颜色之间的平滑过渡。在创建渐变时,可以指定多个中间颜色值,这些值称为色标。每个色标包含一种颜色和一个位置,浏览器自动从一个色标的颜色,平滑过渡到下一个色标的颜色。 在CSS3中,只需将 ba

  • 我想创建一个模拟光的圆,我需要一个径向梯度。我希望它的中心是黄色的,外侧是透明的。 我试过了,但没有达到预期的效果。

  • 刚刚为我正在建设的网站设计了一个新的徽标,并制作了一个透明的背景PNG图像,我希望在它后面有一个放射状的图像,并使图像保持在半径起始的中心。 它在桌面上看起来很好,直到你最小化屏幕,然后出现严重的溢出。我在HTML和正文部分尝试了,这消除了侧面的灰色空间,但图像从径向渐变偏移,看起来很俗气。这个问题也存在于手机中,显示溢出,如果我选择隐藏它,那么它就非常偏离中心。 我尝试了CSS中不同的值的多种组