[Note] 渐变色的绘制

今天在一个小项目里读到的一小块代码,作用是绘制了一个渐变色的背景。源码如下:

    override func drawRect(rect: CGRect) {
        let lightPurple: UIColor = UIColor(red: 0.377, green: 0.075, blue: 0.778, alpha: 1.000)
        let darkPurple: UIColor = UIColor(red: 0.060, green: 0.036, blue: 0.202, alpha: 1.000)
        
        let context = UIGraphicsGetCurrentContext()
        
        //// Gradient Declarations
        let purpleGradient = CGGradientCreateWithColors(CGColorSpaceCreateDeviceRGB(), [lightPurple.CGColor, darkPurple.CGColor], [0, 1])
        
        //// Background Drawing
        let backgroundPath = UIBezierPath(rect: CGRectMake(0, 0, self.frame.width, self.frame.height))
        CGContextSaveGState(context)
        backgroundPath.addClip()
        CGContextDrawLinearGradient(context, purpleGradient,
            CGPointMake(160, 0),
            CGPointMake(160, 568),
            UInt32(kCGGradientDrawsBeforeStartLocation) | UInt32(kCGGradientDrawsAfterEndLocation))
        CGContextRestoreGState(context)
    }

比较简单。但我之前没见过,所以特意查了一下做一下笔记。以下是几个关键的函数:

func CGGradientCreateWithColors(_ space: CGColorSpace?, _ colors: CFArray?, _ locations: UnsafePointer) -> CGGradient?

创建了一个CGGradient对象。
colorspace是个枚举类型,是说颜色的坐标系,常见的比如kCGColorSpaceGenericRGB, kCGColorSpaceGenericGray等等。代码中采用的是调用CGColorSpaceCreateDeviceRGB()方法返回一个CGColorSpace,这样的颜色可能在不同的device上有差异。
colors就是渐变的颜色数组。
locations表示的每个颜色开始的位置,在[0, 1]间取值。默认第一个为0,最后一个为1,中间等分。

func CGContextDrawLinearGradient(_ c: CGContext?, _ gradient: CGGradient?, _ startPoint: CGPoint, _ endPoint: CGPoint, _ options: CGGradientDrawingOptions)

第一个和第二个参数不用说了。第三第四个表示gradient的起始点和结束点,也就是刚才0和1对应的颜色,之间的颜色根据locations线性映射。
options控制的是在超过起始点和结束点的部分要不要填充颜色。这里代码选择都要。
顺便提一下文档里紧挨着的另一个方法:

func CGContextDrawRadialGradient(_ c: CGContext?, _ gradient: CGGradient?, _ startCenter: CGPoint, _ startRadius: CGFloat, _ endCenter: CGPoint, _ endRadius: CGFloat, _ options: CGGradientDrawingOptions)

参数可以顾名思义了。其中起始点是起始的圆心,终点是终止的圆心。

另外还有两个函数:

func CGContextSaveGState(c: CGContext!)
func CGContextRestoreGState(c: CGContext!)

这是绘图里常用的函数CP,用于对graphics state stack的push和pop操作。这样就可以快速回到绘制之前的图形状态了。

就是这样。好简单哈哈哈哈哈
然后我随意玩耍了一下。

[Note] 渐变色的绘制_第1张图片
Screen Shot 2015-12-06 at 7.16.42 PM.png

感受到我想表达从黑夜抵达黎明,以及茫茫宇宙中有一颗美丽的蔚蓝色星球了吗_(:з」∠)_

你可能感兴趣的:([Note] 渐变色的绘制)