用 Core Graphic 绘制图形

原文链接
作者：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()
}

1. Graphic Context（图形内容）是 graphic destination，如果想画一个 view，view 就是你的 Graphic Context（图形内容）。需要给 Graphic Context 一个参考。
2. path 是一组线、弧形、曲线的组合，可以绘制在当前的图形内容（graphic context）上，从而构成复杂的图形。在这里，就画一些线，线的粗细为 5。
3. path 结束，画完图形内容（graphic context）。
4. 使用 CGContextAddRect 来画一个矩形，矩形的边框颜色为灰色。
5. 还是之前的矩形，填充色是绿色。
6. 使用 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 翻译组翻译，已经获得作者翻译授权。