用 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()
}

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 翻译组翻译，已经获得作者翻译授权。

用 Core Graphic 绘制图形

推荐阅读更多精彩内容