iOS 中的重要图形概念 Core Graphics


引言

Core Graphics框架是基于Quartz的高级绘图引擎。 它提供了无与伦比的输出保真度和轻量级2D渲染。 使用此框架可以来处理基于路径的绘图，转换，颜色管理，屏幕渲染，图案，渐变和阴影，图像数据管理，图像创建和图像蒙版，以及PDF文档的创建，显示和解析。在macOS中，Core Graphics还包括用于处理显示硬件，用户基础输入事件和窗口系统的服务。本文将重点介绍这套框架下重要的数据类型概念。（几乎是各种组件的基础，十分重要）

一 Geometric数据类型

Core Graphics框架最广泛采用的功能是以CGGeometry（CG代表Core Graphics）的名称定义的一系列数据类型。 在Swift中，这些数据类型被实现为具有自己的初始化函数，属性和方法的结构。 它们不仅用于绘图，还用于在屏幕上定位图形元素，例如按钮，标签等。此框架中定义的每种数据类型都存储代表属性的值，例如位置或大小。 以下是框架中包含的用于指定这些值的数据类型。

1 CGFloat

此结构用于存储浮点类型值以进行绘图

2 CGSize

CGSize是更加复杂的结构，设计用于存储表示尺度的值。这个数据类型包含以下的初始化函数，属性和方法。

  • CGSize(width: CGFloat, height: CGFloat)
    此初始化程序使用由width和height属性指定的值创建一个CGSize结构。 该结构定义了初始化程序，以根据Int，CGFloat和Double类型的值创建实例。

  • zero
    此类型属性返回CGSize结构，其值设置为0。

  • width
    此属性设置或返回结构的宽度。

  • height
    此属性设置或返回结构的高度。

  • equalTo(CGSize)
    此方法返回一个布尔值，该值指示CGSize结构是否等于属性的值。

3 CGPoint

另一个结构是CGPoint，它用于定义二维坐标系中的点。 此数据类型包括以下初始化程序，属性和方法。

  • CGPoint（x：CGFloat，y：CGFloat）
    该初始化程序使用由x和y属性指定的坐标来创建CGPoint结构。 该结构定义了初始化程序，以根据Int，CGFloat和Double类型的值创建实例。
  • zero
    此类型属性返回一个CGPoint结构，其值设置为0。
  • x
    此属性设置或返回结构的x坐标。
  • y
    此属性设置或返回结构的y坐标。
  • equalTo（CGPoint）
    此方法返回一个布尔值，该值确定CGPoint结构是否等于该属性的值。
4 CGVector

还有一个类似的结构称为CGVector，用于管理二维矢量。 此数据类型包括以下初始化程序和属性。

  • CGVector（dx：CGFloat，dy：CGFloat）
    此初始化程序使用dx和dy属性指定的矢量坐标创建CGVector结构。 该结构定义了初始化程序，以根据Int，CGFloat和Double类型的值创建实例。
  • zero
    此类型属性返回CGVector结构，其值设置为零。
  • dx
    此属性设置或返回结构的x坐标。
  • dy
    此属性设置或返回结构的y坐标。
5 CGRect

最后，还有一个称为CGRect的更复杂的结构，我们可以使用它来定义和使用矩形。该数据类型包括以下初始化器，属性和方法。

  • CGRect(origin: CGPoint, size: CGSize)
    该初始化程序创建一个CGRect结构来存储矩形的原点和大小。 origin属性是带有矩形原点坐标的CGPoint结构，而size属性是带有矩形的宽度和高度的CGSize结构。
  • CGRect(x: CGFloat, y: CGFloat, width: CGFloat, height: CGFloat)
    此初始化程序创建一个CGRect结构，以存储矩形的原点和大小。 x和y属性定义矩形原点的坐标，而width和height属性定义矩形的大小。该结构定义了初始化程序，以根据Int，CGFloat和Double类型的值创建实例。
  • zero
    此类型属性返回一个CGRect结构，其值设置为零。
    原点-此属性设置或返回带有矩形原点坐标的CGPoint结构。
  • size
    此属性设置或返回带有矩形的宽度和高度的CGSize结构。
  • minX
    此属性返回矩形的x坐标的最小值。
  • minY
    此属性返回矩形的y坐标的最小值。
  • maxX
    此属性返回矩形的x坐标的最大值。
  • maxY
    此属性返回矩形y坐标的最大值。
  • midX
    此属性返回位于矩形水平中心的矩形x坐标的值。
  • midY
    此属性返回位于矩形垂直中心的矩形的y坐标值。
  • equalTo(CGRect)
    此方法返回一个布尔值，该布尔值确定是否CGRect结构等于该属性指定的值。
  • contains(CGPoint)
    此方法返回一个布尔值，该值确定该属性指定的值是否包含在CGRect结构内。该属性的类型可以是CGPoint（用于检测点是否在矩形内）或CGRect（用于检测另一个矩形是否在原始矩形内）。
  • intersects(CGRect)
    此方法返回一个布尔值，以指示该属性指定的矩形是否与原始矩形相交。
  • intersection(CGRect)
    此方法返回一个CGRect结构，其结构和矩形的大小由原始矩形与该属性指定的矩形的交集形成。
  • union(CGRect)
    此方法返回一个新的并集的CGRect结构，该结构的矩形的坐标和大小包括原始矩形和该属性指定的矩形。

二 应用举例

例子1 使用便利构造器
1
2
3
import CoreGraphics
var myrect = CGRect(x: 30, y: 20, width: 100, height: 200)
print(“The origin is at \(myrect.origin.x) and \(myrect.origin.y)”) print(“The size is \(myrect.size.width) by \(myrect.size.height)”)

CGRect值的原点和大小属性分别是CGPoint和CGSize结构，因此它们可以像其他任何值一样复制到其他变量或属性中。

例子2 访问CGRect结构内部的结构
1
2
3
4
import CoreGraphics
var mypoint = myrect.origin
var mysize = myrect.size
print(“The origin is at \(mypoint.x) and \(mypoint.y)”) print(“The size is \(mysize.width) by \(mysize.height)”)

有时我们的应用程序必须使用Core Graphic的结构，但是我们不知道它们将需要的值。 在这种情况下，我们可以利用零类型属性。 此属性在大多数结构中都可用，它的作用是返回一个其值初始化为0的结构。

例子3 将空结构分配给CGRect变量
1
2
3
import CoreGraphics
var myrect = CGRect.zero
print(“The origin is at \(myrect.origin.x) and \(myrect.origin.y)”) print(“The size is \(myrect.size.width) by \(myrect.size.height)”)

有时我们的应用程序必须使用Core Graphic的结构，但是我们不知道它们将需要的值。 在这种情况下，我们可以利用零类型属性。 此属性在大多数结构中都可用，它的作用是返回一个其值初始化为0的结构。
例子的myrect变量是一个CGRect结构，其所有属性均以值0初始化。将零属性的值分配给变量与使用初始化程序CGRect(x: 0, y: 0, width: 0, height: 0) 。CGRect结构还包括用于根据其坐标和大小来计算值的属性。 例如，midX和midY属性返回每侧中心的坐标。

例子4 计算矩形中心的坐标
1
2
3
import CoreGraphics
var rect = CGRect(x: 0, y: 0, width: 100, height: 100)
print(“The horizontal center is \(rect.midX)”) // 50.0

CGRect结构中包含的其余方法也易于实现。 下面的示例创建一个矩形和一个点，然后使用contains()方法检查该点是否在矩形内。

例子5 检测点是否在矩形内
1
2
3
4
import CoreGraphics
var rect = CGRect(x: 0, y: 0, width: 100, height: 100) var point = CGPoint(x: 10, y: 50)
if rect.contains(point) {
print(“The point is inside the rectangle”)

三 其他CG概念简述

CGAffineTransform

An affine transformation matrix for use in drawing 2D graphics.

2D Drawing
  • CGContext
    Quartz 2D 绘图环境
  • CGImage
    位图图像或图像蒙版
  • CGPath
    不变的图形路径：对要在图形上下文中绘制的形状或线条的数学描述
  • CGMutablePath
    可变的图形路径：在图形上下文中绘制形状或线条的数学描述
  • CGLayer
    屏幕外上下文，用于重用Core Graphics绘制的内容
Colors and Fonts
  • CGColor
    一组定义颜色的组件，颜色空间指定如何解释它们
  • CGColorConversionInfo
    一个对象，描述如何在色彩空间之间转换以供其他系统服务使用
  • CGColorSpace
    一个配置文件，指定如何解释显示的颜色值
  • CGFont
    一组用于图形文字的字形和布局信息

四 更多资料请参考

Apple Developer Documentation about Core Graphics

参考文献：《iOS 12 Apps for Masterminds》