iOS图形图像与动画视频课程

1-1

1.1.绘制视图在iOS上无论采用那种绘图技术（UIKit、Quartz 2D、Core Animation和OpenGL ES），都离不开UIView，绘制都发生在UIView对象的区域内。在绘制发生的时候如果使用的是系统提供的视图，绘制工作会自动得到处理。然而，如果是自定义视图，则必须重写drawRect:方法，在此提供相应的绘制代码。

1-2

20150522第十六期直播答疑_上iOS高薪在线就业班20150522第十六期直播答疑

1-3

20150522第十六期直播答疑_下iOS高薪在线就业班20150522第十六期直播答疑

1-4

1.1.1.视图绘制周期一旦drawRect:方法被调用，我们就可以使用任何的UIKit、Quartz 2D 、OpenGL ES等技术对视图的内容进行绘制了。绘图过程中除了使用drawRect:方法，还有setNeedsDisplay和setNeedsDisplayInRect:。setNeedsDisplay和setNeedsDisplayInRect:方法是设置视图或者视图部分区域是否需要重写绘制，setNeedsDisplay是重新绘制整个视图，setNeedsDisplayInRect是重新绘制视图的部分区域。原则上我们尽量不要绘制视图的全部，以减少绘制带来开销。触发视图重新绘制的动作有如下几种：1.     当遮挡你的视图的其它视图被移动或删除操作时候。 2.     将视图的hidden属性声明设置为false，使其从隐藏状态变为可见。3.     将视图滚出屏幕，然后再重新回到屏幕上。4.     显式调用视图的setNeedsDisplay或者setNeedsDisplayInRect:方法。

1-5

1.1.2.绘制实例：填充矩形FillingView.swift文件代码如下所示：import UIKitclass FillingView: UIView {   /*   // Only override drawRect: if you perform custom drawing.   // An empty implementation adversely affects performance during animation.   override func drawRect(rect: CGRect) {     // Drawing code   }   */}   override func drawRect(rect: CGRect) {     UIColor.brownColor().setFill()     UIRectFill(rect)   }

1-6

1.1.3.填充与描边UIKit提供非常基本的绘图功能，主要的API有：1. UIRectFill(CGRect rect)。填充矩形函数，前面的例子介绍过。2. UIRectFrame(CGRect rect)。矩形描边函数。3. UIBezierPath。绘制常见路径类，包括：线段、弧线、矩形、圆角矩形和椭圆的方法。UIKit虽然提供了UIBezierPath等类，但是对于线段、渐变、阴影、反锯齿等高级特性支持还是不及Quartz 2D。

「仅限付费用户」点击下载“源码.zip”

1-7

1.2.Quartz图形上下文1.图形上下文CGContextdrawRect :方法中通过(CGContextRef)UIGraphicsGetCurrentContext(void)函数获得访问图形上下文对象。图形上下文仅对当前的drawRect :方法调用有效，不要把它设置为成员变量。2.保存和恢复上下文状态有的时候需要多次改变图形上下文对象的参数，这样两次绘制就可能互相有影响，这就好像拿着蜡笔画画，每一次手只能拿一支蜡笔。为了防止互相影响，可以使用 CGContextSaveGState函数保存图形上下文设置，绘制完成使用CGContextRestoreGState函数恢复图形上下文设置。

「仅限付费用户」点击下载“14.图形、图像与动画.pdf”

1-8

1.3.Quartz路径1-基本图元和闭合路径Quartz路径可以用来描述矩形、圆及其他想要画的2D几何图形。通过路径我们可以对这些几何图形进行描边、填充和描边填充处理。Core Graphics（Quartz 2D）中有4个基本图元用于描述路径：点、线段、弧和贝赛尔（Bézier）曲线。1、点点是二维空间中的一个位置，不要把它想成像素，一个点完全不占空间，所以画一个点不会在屏幕上显示任何东西，我们可以在路径里加入很多的点，想加多少加多少。2、线段线段由两个点定义：起点和终点。线段可以通过描边绘制出来，我们可以通过设置图形上下文，如画笔宽度或者颜色等参数，就可以绘制出两点之间的线段3、弧弧可以由一个圆心点、半径、起始角和结束角描述的。圆是弧的特例，只需要设置为起始角0度，结束角为360度就可以了。因为弧是占有一定面积的路径，所以可以被填充、描边和描边填充出来。4、贝塞尔(Bézier)曲线贝赛尔（Bézier）曲线是法国数学家贝塞尔在工作中发现，任何一条曲线都可以通过与它相切的控制线两端的点的位置来定义。

1-9

1.1.4.绘制图像和文本除了可以绘制几何图形外，也可以绘制文本和图像。这就像是使用Interface Builder工具从对象库中拖拽出来的标准控件（UILabel和UIImageView）一样。这些绘制可以使用UIImage和NSString实现。他们对应的绘制方法如下。UIImage类中绘制图像主要的方法:1.     - drawAtPoint:。设置绘制定点，图2-7左所示。2.     - drawInRect:。图片绘制在指定的矩形里, 图2-7中所示。3.     -drawAsPatternInRect:。在指定的矩形里平铺绘制图片，如果图片大小超出了指定的矩形，形式上与- drawAtPoint:方法类似了，如果图片大小小于指定的矩形如图2-7右所示，就会有平铺的效果。在UIKit框架中提供了一个NSString类的扩展UIStringDrawing，它提供了绘制文本主要的方法:1.     - drawAtPoint: withAttributes:。文本在指定点绘制。2.     - drawInRect: withAttributes:。文本在指定的矩形里绘制。

1-10

1.4.1.坐标系在苹果的2D图形技术是Quartz 2D和UIKit，Quartz 2D是Mac OS X和iOS环境下的2D绘图引擎。在iOS中我们还可以通过UIKit进行图形绘制，但是Quartz 2D和UIKit坐标系不同。

1-11

1.4.2.2D图形的基本变换1、平移变换平移是一物体从一个位置到另一位置所做的直线移动。如果要把一个位于 P(x, y) 的点移到新位置 P′(x′, y′) 时，只要在原坐标上加上平移距离 Tx 及 Ty 即可

1-12

1.4.3.CTM变换矩阵（1.平移变换）Quartz 2D提供了多种形式的变换，其中主要：当前变换矩阵（current transformation matrix，缩写CTM）变换和仿射（affine）变换。主要的函数有：1.     CGContextRotateCTM，旋转变换。2     CGContextScaleCTM，缩放变换。3.     CGContextTranslateCTM，平移变换。

1-13

1.4.3.CTM变换矩阵（2.缩放变换）2、缩放变换缩放操作根据指定的Sx、Sy因子来改变图像的大小，从而放大或缩小图像。Sx、Sy因子的大小决定了新的坐标系是否比原始坐标系大或者小。

1-14

1.4.3.CTM变换矩阵（3.旋转变换）3、旋转变换Sx、Sy旋转变换根据指定的角度来旋转坐标。我们可以通过CGContextRotateCTM函数来指定旋转角度（以弧度为单位）。