微信号:learnSwift

介绍:每天推送一篇精品Swift文章,无偿翻译,共同学习.;;

通过 Core Graphics 绘制渐变颜色

2017-01-05 22:45 Arthur

译者:冬瓜;校对:星夜暮晨;定稿:CMB

Core Graphics 是一套非常强大的底层 API 接口集合。在这篇教程中,我们将借助 Core Graphics 来创建渐变颜色。出于简便起见,我们将创建线性渐变 (linear gradients)。所谓线性渐变,是从一个点到另外一个点颜色过渡的描述。我们将会创建一个从左向右渐变的视图。该教程的实验环境是 Xcode 8 和 iOS 10。

首先打开 Xcode 创建一个 Single View Application


点击 Next。输入 product name,填写 IOS10DrawGradientsTutorial 然后将 Organization NameOrganization Identifier 这两项按照你的习惯来填写。将 Language 设置为 Swift ,并且确定 Devices 选项为 iPhone


在我们的工程中添加一个新文件。选择 iOS->Source->Cocoa Touch Class。将新的 Class 命名为 GradientView 并且确定其继承自 UIView 类。


转到 storyboard 中,在 Document Outline 选择要编辑的视图,然后点击 Identity Inspector 选项卡,在 Custom Class 一栏中将 Class 选择 GradientView


打开文件 gradientView.swift ,并修改 drawRect 方法:

override func draw(_ rect: CGRect) {
    // 1
    guard let currentContext = UIGraphicsGetCurrentContext() else { return }

    // 2
    currentContext.saveGState()

    // 3
    let colorSpace = CGColorSpaceCreateDeviceRGB()

    // 4
    let startColor = UIColor.red
    guard let startColorComponents = startColor.cgColor.components else { return }

    let endColor = UIColor.blue
    guard let endColorComponents = endColor.cgColor.components else { return }

    // 5
    let colorComponents: [CGFloat]
            = [startColorComponents[0], startColorComponents[1], startColorComponents[2], startColorComponents[3], endColorComponents[0], endColorComponents[1], endColorComponents[2], endColorComponents[3]]

    // 6
    let locations:[CGFloat] = [0.0, 1.0]

    // 7
    guard let gradient = CGGradient(colorSpace: colorSpace,colorComponents: colorComponents,locations: locations,count: 2) else { return }

    let startPoint = CGPoint(x: 0, y: self.bounds.height)
    let endPoint = CGPoint(x: self.bounds.width,y: self.bounds.height)

    // 8
    currentContext.drawLinearGradient(gradient, start: startPoint, end: endPoint, options: CGGradientDrawingOptions(rawValue: UInt32(0)))

    // 9
    currentContext.restoreGState()
}
  1. UIGraphicsGetCurrentContext 得到了图形上下文 (graphical context),这里可以当做一个新的画布。
  2. 图形上下文将被存储,以便于之后的存储操作。
  3. CGColorSpace 描述的是颜色的域值范围。大多情况下你会使用到 RGB 模式来描述颜色。
  4. 这里我们定义一个渐变样式的起始颜色和结束颜色。CGColor 对象是底层颜色接口的定义。这个接口方法会从 CGColor 中获取指定颜色。
  5. 在这个数组中,将 RGB 颜色分量和 alpha 值写入。
  6. 在此处可以定义各种颜色的相对位置。
  7. CGGradient 用来描述渐变信息。
  8. 这里渐变将沿纵轴 (vertical axis) 方向绘制。
  9. 存储图形上下文。

编译并运行我们的工程:


可以从我的 Github 上下载本篇文章的示例代码。

本文由 SwiftGG 翻译组翻译,已经获得作者翻译授权,最新文章请访问 http://swift.gg

 
SwiftGG翻译组 更多文章 自定义 Tab Bar 教程 如何阅读 Swift 标准库中的源码 趣谈 iOS 10 UIKit 绘图 iOS 10 本地通知教程 通过 Core Graphics 绘制渐变颜色
猜您喜欢 canvas系列4-多线条组成图形 浅析Java语言慢的原因 如何使用PHP构建一个高性能的弹幕后端服务 六月分享来袭,精彩继续! 浅谈浏览器http的缓存机制