原文链接
作者：Arthur Knopper
原文日期：2016/10/06
译者：Crystal Sun
Core Graphics 这个 API 同时出现在 Cocoa 和 Cocoa Touch 中，用于绘制图形对象。在本节教程中，我们将画一些基本的图形，例如矩形或者圆形。本节教程使用的是 Xcode 8 和 iOS 10。
打开 Xcode，创建一个 Single View Application。
点击 Next，Product Name 使用 IOS10DrawShapesTutorial，填写自己的 Organization Name 和 Organization Identifier，Language 一栏选择 Swift，Devices 一栏选择 iPhone。
打开 Storyboard，从 Object Library （控件库）里拖拽一个 Horizontal Stack View，放到主界面的顶部。找到 Attributes Inspector，在 Stack View 部分，将 Distribution type 改为 Fill Equally。从控件库拖拽 3 个 button 控件放到 Stack View 里，修改为下列名字：Rectangle，Lines 和 Circle。选中 Stack View，点击右下角 Auto Layout 的 Pin 按钮，输入下图中的约束条件，点击 Add 3 Constants。
Storyboard 现在看起来应该如下图所示：
选中一个 button，到 Attribute Inspector 中，在 View 这个区域里，把 Tag 的值改成0，其他的两个 button 的 Tag 值分别改成 1 和 2，我们会在后面用到这个值，这样就能知道哪个 button 被点击了。
打开 Assistant Editor，确保 ViewController.swift 文件可见。按住 Ctrol 键，选中 “Lines” 按钮，将其拖拽到 ViewController 泪下面，创建下图所示的 Action：
选中其他的 button 按钮，进行同样的操作。每次按钮被点击，都会执行 IBAction 方法。
绘图行为在自定义的 view 里进行，给工程添加一个新文件，在菜单栏选择 File -> New File -> iOS -> Cocoa Touch Class。Class 的名字为：ShapeView，Subclass 是 UIView。
找到 ShapeView.swift，添加下列属性：
var currentShapeType: Int = 0
这个 currentShapeType 属性用于选择绘制对应的图形。接下来进行初始化：
init(frame:CGRect, shape: Int){
super.init(frame:frame)
self.currentShapeType = shape
}
required init?(coder aDecoder: NSCoder){
fatalError("init(coder:) has not been implemented")
}
初始化之后，之前设置的 Tag 值决定了图形形状类型，drawRect 方法用于绘制自定义图形：
override func draw(_ rect: CGRect) {
switch currentShapeType {
case 0: drawRectangle()
case 1: drawLines()
case 2: drawCircle()
default: print("default")
}
}
接下来，实现每个绘图的方法。
func drawLines() {
//1
guard let ctx = UIGraphicsGetCurrentContext() else { return }
//2
ctx.beginPath()
ctx.move(to: CGPoint(x: 20.0, y: 20.0))
ctx.addLine(to: CGPoint(x: 250.0, y: 100.0))
ctx.addLine(to: CGPoint(x: 100.0, y: 200.0))
ctx.setLineWidth(5)
//3
ctx.closePath()
ctx.strokePath()
}
func drawRectangle() {
let center = CGPoint(x: self.frame.size.width / 2.0, y: self.frame.size.height / 2.0)
let rectangleWidth:CGFloat = 100.0
let rectangleHeight:CGFloat = 100.0
guard let ctx = UIGraphicsGetCurrentContext() else { return }
//4
ctx.addRect(CGRect(x: center.x - (0.5 * rectangleWidth), y: center.y - (0.5 * rectangleHeight), width: rectangleWidth, height: rectangleHeight))
ctx.setLineWidth(10)
ctx.setStrokeColor(UIColor.gray.cgColor)
ctx.strokePath()
//5
ctx.setFillColor(UIColor.green.cgColor)
ctx.addRect(CGRect(x: center.x - (0.5 * rectangleWidth), y: center.y - (0.5 * rectangleHeight), width: rectangleWidth, height: rectangleHeight))
ctx.fillPath()
}
func drawCircle() {
let center = CGPoint(x: self.frame.size.width / 2.0, y: self.frame.size.height / 2.0);
guard let ctx = UIGraphicsGetCurrentContext() else { return }
ctx.beginPath()
//6
ctx.setLineWidth(5)
let x:CGFloat = center.x
let y:CGFloat = center.y
let radius: CGFloat = 100.0
let endAngle: CGFloat = CGFloat(2 * M_PI)
ctx.addArc(center: CGPoint(x: x,y: y), radius: radius, startAngle: 0, endAngle: endAngle, clockwise: true)
ctx.strokePath()
}
- Graphic Context（图形内容）是 graphic destination，如果想画一个 view，view 就是你的 Graphic Context（图形内容）。需要给 Graphic Context 一个参考。
- path 是一组线、弧形、曲线的组合，可以绘制在当前的图形内容（graphic context）上，从而构成复杂的图形。在这里，就画一些线，线的粗细为 5。
- path 结束，画完图形内容（graphic context）。
- 使用 CGContextAddRect 来画一个矩形，矩形的边框颜色为灰色。
- 还是之前的矩形，填充色是绿色。
- 使用 CGContextAddArc 来画一个圆。
下一步，在 ViewController.swift 文件中实现按钮点击方法。
@IBAction func buttonPressed(_ sender: AnyObject) {
let myView = ShapeView(frame: CGRect(x: 25, y: 200, width: 280, height: 250), shape: sender.tag)
myView.backgroundColor = UIColor.cyan
view.addSubview(myView)
}
运行工程，点击每个按钮，绘制不同的图形。
可以从 github 上下载 IOS10DrawShapesTutorial 教程的源码。
本文由 SwiftGG 翻译组翻译，已经获得作者翻译授权。
