用 Core Graphic 绘制图形

栏目: IOS · 发布时间: 6年前

内容简介:用 Core Graphic 绘制图形

作者:Arthur Knopper, 原文链接 ,原文日期:2016/10/06

译者: Crystal Sun ;校对:Cwift;定稿: CMB

Core Graphics 这个 API 同时出现在 Cocoa 和 Cocoa Touch 中,用于绘制图形对象。在本节教程中,我们将画一些基本的图形,例如矩形或者圆形。本节教程使用的是 Xcode 8 和 iOS 10。

打开 Xcode,创建一个 Single View Application。

用 Core Graphic 绘制图形

点击 Next,Product Name 使用 IOS10DrawShapesTutorial ,填写自己的 Organization Name 和 Organization Identifier,Language 一栏选择 Swift,Devices 一栏选择 iPhone。

用 Core Graphic 绘制图形

打开 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。

用 Core Graphic 绘制图形

Storyboard 现在看起来应该如下图所示:

用 Core Graphic 绘制图形

选中一个 button,到 Attribute Inspector 中,在 View 这个区域里,把 Tag 的值改成 0,其他的两个 button 的 Tag 值分别改成 1 和 2,我们会在后面用到这个值,这样就能知道哪个 button 被点击了。

用 Core Graphic 绘制图形

打开 Assistant Editor,确保 ViewController.swift 文件可见。按住 Ctrol 键,选中 “Lines” 按钮,将其拖拽到 ViewController 类下面,创建下图所示的 Action:

用 Core Graphic 绘制图形

选中其他的按钮,进行同样的操作。每次按钮被点击,都会执行 IBAction 方法。

绘图行为在自定义的 View 里进行,给工程添加一个新文件,在菜单栏选择 File -> New File -> iOS -> Cocoa Touch Class。Class 的名字为: ShapeView ,父类是 UIView。

用 Core Graphic 绘制图形

找到 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(图形上下文)仿佛是一块画布,如果想在一个 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)
}

运行工程,点击每个按钮,绘制不同的图形。

用 Core Graphic 绘制图形

可以从 github 上下载 IOS10DrawShapesTutorial 教程的源码。

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

数学与泛型编程

数学与泛型编程

[美]亚历山大 A. 斯捷潘诺夫(Alexander A. Stepanov)、[美]丹尼尔 E. 罗斯(Daniel E. Rose) / 爱飞翔 / 机械工业出版社 / 2017-8 / 79

这是一本内容丰富而又通俗易懂的书籍,由优秀的软件设计师 Alexander A. Stepanov 与其同事 Daniel E. Rose 所撰写。作者在书中解释泛型编程的原则及其所依据的抽象数学概念,以帮助你写出简洁而强大的代码。 只要你对编程相当熟悉,并且擅长逻辑思考,那么就可以顺利阅读本书。Stepanov 与 Rose 会清晰地讲解相关的抽象代数及数论知识。他们首先解释数学家想要解决......一起来看看 《数学与泛型编程》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

MD5 加密
MD5 加密

MD5 加密工具