版本记录
| 版本号 | 时间 |
|---|---|
| V1.0 | 2018.10.21 星期日 |
前言
quartz是一个通用的术语，用于描述在iOS和MAC OS X中整个媒体层用到的多种技术 包括图形、动画、音频、适配。Quart 2D是一组二维绘图和渲染API，Core Graphic会使用到这组API，Quartz Core专指Core Animation用到的动画相关的库、API和类。CoreGraphics是UIKit下的主要绘图系统，频繁的用于绘制自定义视图。Core Graphics是高度集成于UIView和其他UIKit部分的。Core Graphics数据结构和函数可以通过前缀CG来识别。在app中很多时候绘图等操作我们要利用CoreGraphic框架，它能绘制字符串、图形、渐变色等等，是一个很强大的工具。感兴趣的可以看我另外几篇。
1. CoreGraphic框架解析（一）—— 基本概览
2. CoreGraphic框架解析（二）—— 基本使用
3. CoreGraphic框架解析（三）—— 类波浪线的实现
4. CoreGraphic框架解析（四）—— 基本架构补充
5. CoreGraphic框架解析 （五）—— 基于CoreGraphic的一个简单绘制示例 （一）
6. CoreGraphic框架解析 （六）—— 基于CoreGraphic的一个简单绘制示例 （二）
开始
在我们的Core Graphics教程的第三部分也是最后一部分中，您将把Flo带到最终形式。 具体来说，你将：
- 为背景创建重复模式。
- 从头到尾画一枚奖牌，奖励用户每天成功饮用八杯水。
您在本节中的任务是使用UIKit的pattern方法来创建此背景模式：
转到File \ New \ File ...并选择iOS iOS \ Source \ Cocoa Touch Class模板以创建一个名为BackgroundView的类，其为UIView子类。 单击Next，然后单击Create。
转到Main.storyboard，选择ViewController的主视图，并在Identity Inspector中将类更改为BackgroundView。
使用Assistant Editor设置BackgroundView.swift和Main.storyboard，使它们并排放置。
将BackgroundView.swift中的代码替换为：
import UIKit
@IBDesignable
class BackgroundView: UIView {
//1
@IBInspectable var lightColor: UIColor = UIColor.orange
@IBInspectable var darkColor: UIColor = UIColor.yellow
@IBInspectable var patternSize: CGFloat = 200
override func draw(_ rect: CGRect) {
//2
let context = UIGraphicsGetCurrentContext()!
//3
context.setFillColor(darkColor.cgColor)
//4
context.fill(rect)
}
}
您的故事板的背景视图现在应该是黄色的。 以上代码的更多细节：
- 1）
lightColor和darkColor具有@IBInspectable属性，因此以后更容易配置背景颜色。 你使用橙色和黄色作为临时颜色，这样你就可以看到发生了什么。patternSize控制重复模式的大小。 它最初设置为大型，因此很容易看出发生了什么。 - 2）
UIGraphicsGetCurrentContext（）为您提供视图的上下文，也是draw（_ rect :)绘制的地方。 - 3） 使用
Core Graphics方法setFillColor（）设置上下文的当前填充颜色。 请注意，在使用Core Graphics时，您需要使用CGColor，这是darkColor的一个属性。 - 4）
fill（）不是设置矩形路径，而是使用当前填充颜色填充整个上下文。
您现在要使用UIBezierPath（）绘制这三个橙色三角形。 这些数字对应于以下代码中的点：
仍然在BackgroundView.swift中，将此代码添加到draw(_ rect:)结束：
let drawSize = CGSize(width: patternSize, height: patternSize)
//insert code here
let trianglePath = UIBezierPath()
//1
trianglePath.move(to: CGPoint(x: drawSize.width/2, y: 0))
//2
trianglePath.addLine(to: CGPoint(x: 0, y: drawSize.height/2))
//3
trianglePath.addLine(to: CGPoint(x: drawSize.width, y: drawSize.height/2))
//4
trianglePath.move(to: CGPoint(x: 0,y: drawSize.height/2))
//5
trianglePath.addLine(to: CGPoint(x: drawSize.width/2, y: drawSize.height))
//6
trianglePath.addLine(to: CGPoint(x: 0, y: drawSize.height))
//7
trianglePath.move(to: CGPoint(x: drawSize.width, y: drawSize.height/2))
//8
trianglePath.addLine(to: CGPoint(x: drawSize.width/2, y: drawSize.height))
//9
trianglePath.addLine(to: CGPoint(x: drawSize.width, y: drawSize.height))
lightColor.setFill()
trianglePath.fill()
请注意您如何使用一条路径绘制三个三角形。move(to:)就像在绘图并将其移动到新位置时从纸上抬起笔。
您的故事板现在应该在背景视图的左上角有一个橙色和黄色的图像。
到目前为止，您已直接绘制到视图的绘图上下文中。 为了能够重复此图案(pattern)，您需要在上下文之外创建一个图像，然后将该图像用作上下文中的模式。
找到以下内容。 它接近于draw(_ rect:)的顶部，但是在初始上下文调用之后：
let drawSize = CGSize(width: patternSize, height: patternSize)
添加以下代码，方便地在此处插入代码：
UIGraphicsBeginImageContextWithOptions(drawSize, true, 0.0)
let drawingContext = UIGraphicsGetCurrentContext()!
//set the fill color for the new context
darkColor.setFill()
drawingContext.fill(CGRect(x: 0, y: 0, width: drawSize.width, height: drawSize.height))
嘿! 那些橙色三角形从故事板上消失了。 他们去哪儿了？
UIGraphicsBeginImageContextWithOptions（）创建一个新的上下文并将其设置为当前绘图上下文，因此您现在正在绘制这个新的上下文。 该方法的参数是：
- 上下文的大小。
- 上下文是否不透明 - 如果您需要透明度，那么这需要是错误的。
- 上下文的
scale。 如果您正在使用视网膜屏幕，则应为2.0，如果是iPhone 6 Plus，则应为3.0。 但是，这使用0.0，这可确保自动应用设备的正确比例。
然后，您使用UIGraphicsGetCurrentContext（）来获取对此新上下文的引用。
然后用黄色填充新的上下文。 您可以通过将上下文不透明度设置为false来让原始背景显示，但绘制不透明上下文比绘制透明更快，并且该参数足以变为不透明。
将此代码添加到draw(_ rect:)结束：
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
这从当前上下文中提取UIImage。 当您使用UIGraphicsEndImageContext（）结束当前上下文时，绘图上下文将恢复为视图的上下文，因此draw(_ rect:)中的任何进一步绘图都会出现在视图中。
要将图像绘制为重复模式，请将此代码添加到draw(_ rect:)结束：
UIColor(patternImage: image).setFill()
context.fill(rect)
这通过将图像用作颜色而不是纯色来创建新的UIColor。
构建并运行应用程序。 您现在应该拥有相当明亮的应用背景。
转到Main.storyboard，选择背景视图，然后在Attributes Inspector中将@IBInspectable值更改为以下内容：
Light Color: RGB(255, 255, 242)Dark Color: RGB(223, 255, 247)Pattern Size: 30
使用绘制背景图案进行更多实验。 看看你是否可以将波尔卡圆点图案作为背景而不是三角形。
当然，您可以将自己的非矢量图像替换为重复样式。
Drawing Images - 绘图图像
在本教程的最后一段，你将获得一枚奖章，以奖励用户喝足够的水。 当计数器达到八个眼镜的目标时，将出现此奖章。
您将在Swift Playground中绘制它，而不是使用@IBDesignable，然后将代码复制到UIImageView子类。虽然交互式故事板通常很有用，但它们有局限性；他们只绘制简单的代码，当您创建复杂的设计时，故事板通常会过时。
在这种特殊情况下，当用户喝八杯水时，您只需要绘制一次图像。如果用户永远不会达到目标，则无需制作奖牌。
一旦绘制，它也不需要使用draw（_ rect :)和setNeedsDisplay（）重绘。
是时候把画笔放到画布上了。您将使用Swift playground构建奖牌视图，然后在完成后将代码复制到Flo项目中。
转到File \ New \ Playground ....选择Blank模板，单击Next，将操场命名为MedalDrawing，然后单击Create。
在新的playground窗口中，将playground代码替换为：
import UIKit
let size = CGSize(width: 120, height: 200)
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
let context = UIGraphicsGetCurrentContext()!
//This code must always be at the end of the playground
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
这将创建绘图上下文，就像您对图案图像所做的那样。
记下最后两行；你总是需要在playground的底部，所以你可以在playground上预览图像。
接下来，在灰色结果列中单击此代码右侧的方形按钮：
let image = UIGraphicsGetImageFromCurrentImageContext()
这将在代码下方放置预览图像。 图像将随着您对代码所做的每次更改而更新。
通常最好做一个草图来围绕绘制元素所需的顺序 - 看看我在构思本教程时所做的“杰作”：
这是绘制奖牌的顺序：
- 背带（红色）
- 奖章（金色渐变）
- 表扣（深金色）
- 前色带（蓝色）
- 数字1（深金色）
请记住保留playground的最后两行（从最后的上下文中提取图像的位置），并在这些行之前将此绘图代码添加到playground：
首先，设置您需要的非标准颜色。
//Gold colors
let darkGoldColor = UIColor(red: 0.6, green: 0.5, blue: 0.15, alpha: 1.0)
let midGoldColor = UIColor(red: 0.86, green: 0.73, blue: 0.3, alpha: 1.0)
let lightGoldColor = UIColor(red: 1.0, green: 0.98, blue: 0.9, alpha: 1.0)
这一切现在都应该很熟悉了。 请注意，当您声明颜色时，颜色会显示在playground的右边缘。
添加丝带红色部分的绘图代码：
//Lower Ribbon
let lowerRibbonPath = UIBezierPath()
lowerRibbonPath.move(to: CGPoint(x: 0, y: 0))
lowerRibbonPath.addLine(to: CGPoint(x: 40, y: 0))
lowerRibbonPath.addLine(to: CGPoint(x: 78, y: 70))
lowerRibbonPath.addLine(to: CGPoint(x: 38, y: 70))
lowerRibbonPath.close()
UIColor.red.setFill()
lowerRibbonPath.fill()
这里没有什么新东西，只是创建一条路径并填充它。 您应该会在右侧窗格中看到红色路径。
添加clasp的代码：
//Clasp
let claspPath = UIBezierPath(roundedRect: CGRect(x: 36, y: 62, width: 43, height: 20), cornerRadius: 5)
claspPath.lineWidth = 5
darkGoldColor.setStroke()
claspPath.stroke()
在这里，您可以使用带有圆角的UIBezierPath（roundedRect :)，方法是使用cornerRadius参数。 扣环应在右侧窗格中绘制。
添加纪念章的代码：
//Medallion
let medallionPath = UIBezierPath(ovalIn: CGRect(x: 8, y: 72, width: 100, height: 100))
//context.saveGState()
//medallionPath.addClip()
let colors = [darkGoldColor.cgColor, midGoldColor.cgColor, lightGoldColor.cgColor] as CFArray
let gradient = CGGradient(colorsSpace: CGColorSpaceCreateDeviceRGB(), colors: colors, locations: [0, 0.51, 1])!
context.drawLinearGradient(gradient, start: CGPoint(x: 40, y: 40), end: CGPoint(x: 40, y: 162), options: [])
//context.restoreGState()
请注意注释掉的行。 这些是暂时显示如何绘制渐变：
要将渐变放在一个角度上，使其从左上角到右下角，请更改渐变的结束x坐标。 将drawLinearGradient（）代码更改为：
context.drawLinearGradient(gradient, start: CGPoint(x: 40, y: 40), end: CGPoint(x: 100, y: 160), options: [])
现在取消注释奖章绘图代码中的这三行，以创建一个剪切路径来约束徽章圆圈内的渐变。
就像在本系列的第2部分中绘制图形时所做的那样，在添加剪切路径之前保存上下文的绘制状态，并在绘制渐变之后恢复它，以便不再剪切上下文。
要绘制奖牌的实线内线，请使用奖章的圆圈路径，但在绘制之前缩放它。 您只需将转换应用于一个路径，而不是转换整个上下文。
在奖章绘图代码后添加此代码：
//Create a transform
//Scale it, and translate it right and down
var transform = CGAffineTransform(scaleX: 0.8, y: 0.8)
transform = transform.translatedBy(x: 15, y: 30)
medallionPath.lineWidth = 2.0
//apply the transform to the path
medallionPath.apply(transform)
medallionPath.stroke()
这会将路径缩小到原始大小的80％，然后变换路径以使其在渐变视图中居中。
在内部行代码后添加上部丝带绘图代码：
//Upper Ribbon
let upperRibbonPath = UIBezierPath()
upperRibbonPath.move(to: CGPoint(x: 68, y: 0))
upperRibbonPath.addLine(to: CGPoint(x: 108, y: 0))
upperRibbonPath.addLine(to: CGPoint(x: 78, y: 70))
upperRibbonPath.addLine(to: CGPoint(x: 38, y: 70))
upperRibbonPath.close()
UIColor.blue.setFill()
upperRibbonPath.fill()
这与您为下部丝带添加的代码非常相似：创建贝塞尔路径并填充它。
最后一步是在奖牌上绘制数组1。 在上面的丝带代码后添加此代码：
//Number One
//Must be NSString to be able to use draw(in:)
let numberOne = "1" as NSString
let numberOneRect = CGRect(x: 47, y: 100, width: 50, height: 50)
let font = UIFont(name: "Academy Engraved LET", size: 60)!
let numberOneAttributes = [
NSAttributedStringKey.font: font,
NSAttributedStringKey.foregroundColor: darkGoldColor
]
numberOne.draw(in: numberOneRect, withAttributes: numberOneAttributes)
在这里，您可以使用文本属性定义NSString，并使用draw（_in :)将其绘制到绘图上下文中。
看起来不错！
你越来越近了，但看起来有点二维。 有一些阴影会很好。
Shadows - 阴影
要创建阴影，您需要三个元素：颜色，偏移（阴影的距离和方向）和模糊。
在playground的顶部，在定义金色之后但在// Lower Ribbon线之前，插入此阴影代码：
//Add Shadow
let shadow: UIColor = UIColor.black.withAlphaComponent(0.80)
let shadowOffset = CGSize(width: 2.0, height: 2.0)
let shadowBlurRadius: CGFloat = 5
context.setShadow(offset: shadowOffset, blur: shadowBlurRadius, color: shadow.cgColor)
这会产生影子，但结果可能不是你想象的那样。 这是为什么？
将对象绘制到上下文中时，此代码会为每个对象创建一个阴影。
啊，哈！ 你的奖章包括五个物体。 难怪它看起来有点模糊。
幸运的是，它很容易修复。 只需使用透明层对绘图对象进行分组，您只需为整个组绘制一个阴影。
添加代码以在阴影代码之后创建组。 从这开始：
context.beginTransparencyLayer(auxiliaryInfo: nil)
当你开始一个组时，你还需要结束它，所以在playground的末尾添加下一个块，但是在你检索最终图像的点之前：
context.endTransparencyLayer()
现在，您将获得一个完整的奖牌图像，其中包含干净整洁的阴影：
这样就完成了playground代码，并且你有一枚奖牌来展示它！
Adding the Medal Image to an Image View - 将奖章图像添加到图像视图
现在您已经准备好了代码来绘制奖牌（顺便说一句看起来很棒），您需要将它渲染到主Flo项目中的UIImageView中。
切换回Flo项目并为图像视图创建一个新文件。
单击File \ New \ File ...并选择Cocoa Touch Class模板。 单击Next，然后将类命名为MedalView。 使其成为UIImageView的子类，然后单击Next，再单击Create。
转到Main.storyboard并添加UIImageView作为Counter View的子视图。 选择UIImageView，然后在Identity Inspector中将类更改为MedalView。
在Size Inspector中，为Image View提供坐标X = 76，Y = 147，宽度= 80和高度= 80：
在Attributes Inspector中，将Content Mode更改为Aspect Fit，以便图像自动调整大小以适合视图。
转到MedalView.swift并添加一个方法来创建奖牌：
func createMedalImage() -> UIImage {
println("creating Medal Image")
}
这将创建一个日志，以便您知道何时创建图像。
切换回MedalDrawing的playground，并复制除初始import UIKit之外的整个代码。
返回MedalView.swift并将playground操作码粘贴到createMedalImage（）中。
在createMedalImage（）的末尾，添加：
return image!
这应该压缩编译错误。
在类的顶部，添加一个属性来保存奖牌图片：
lazy var medalImage: UIImage = self.createMedalImage()
延迟声明修饰符意味着计算密集的奖牌图像代码仅在必要时绘制。 因此，如果用户从不记录饮用八杯水，则奖牌绘图代码将永远不会运行。
添加一个方法来显示奖牌：
func showMedal(show: Bool) {
image = (show == true) ? medalImage : nil
}
转到ViewController.swift并在类的顶部添加一个outlet：
@IBOutlet weak var medalView: MedalView!
转到Main.storyboard并将新的MedalView连接到此outlet。
返回ViewController.swift并将此方法添加到类中：
func checkTotal() {
if counterView.counter >= 8 {
medalView.showMedal(show: true)
} else {
medalView.showMedal(show: false)
}
}
如果您在白天喝足够的水，这将显示奖牌。
在viewDidLoad（）和pushButtonPressed（_ :)的末尾调用此方法：
checkTotal()
构建并运行应用程序。 它应该如下所示：
在调试控制台中，您将看到creating Medal Image日志仅在计数器达到8时输出并显示奖牌，因为medalImage使用延迟声明。
后记
本篇主要讲述了基于CoreGraphic的一个简单绘制示例 ，感兴趣的给个赞或者关注~~~
