这门课解决什么问题与基础门槛

很多写 iOS 的人习惯了拖拽控件、改约束,一旦遇到画板、折线图、不规则进度条或者签名板就卡壳,只能去搜开源库拼凑。这门课要补的就是这块能力缺口:脱离现成控件,直接用 UIKit 和 Quartz 2D 从零画图。它讲的是视图绘制周期怎么跑、图形上下文是什么、路径怎么闭合、填充和描边怎么切换。如果你写过 Swift 或者 Objective-C,能看懂基本的视图控制器和生命周期,但没碰过 drawRect 以内的东西,这门课正好接上。如果你连 IBOutlet 和基本布局都没搞清,先回去补基础,这里不会带你从头认识 Xcode。别假装什么都会,绘图底层是分水岭,跨过去才能摆脱对第三方库的依赖。

建议先看哪几块与资料怎么配合练习

别按顺序从头啃,先抓绘制周期和图形上下文这两节。视图绘制周期告诉你系统什么时候调用你的绘制代码、为什么改了数据不刷新,这是很多人画图卡住的根本原因;图形上下文决定了你画的东西往哪去、状态怎么保存和恢复,不懂这个后面写路径会到处串。看完这两块再去碰路径和基本图元,照着敲一遍闭合路径的例子。配套资料里的答疑片段别跳过,那是别人卡过的坑,比如坐标系颠倒、线条发虚、填充溢出,比正文更贴近实操。练习时别只看不写,每讲完一个图元就自己改参数,把矩形换成圆角、把直线改成曲线,看效果和预期差在哪。资料里的代码片段直接拷进工程跑,改几个坐标值观察重绘规律,这才是查漏补缺的用法。

学完能独立做什么

学完这块你不会立刻变成动画高手,但能独立干几件实事:自己画一个带刻度的进度条,不用依赖第三方库;写一个手势签名页面,把手指轨迹存成图片;画简单的柱状图或折线图,数据变了能触发重绘。再往深走,理解了路径和上下文,后面碰 Core Animation 的图层遮罩、形变也不会一头雾水。这门课的边界很清楚,它只讲 Quartz 2D 和 UIKit 绘图,不涉及 Metal 和复杂的物理动画。如果你手头正有自定义绘制需求卡着,直接拿这课的东西去套,比泛泛看一遍有用得多。缺哪补哪,画不出来就回来重看上下文那一节,别硬扛。

课程目录

1-1 [UIKit与Quartz 2D绘图技术] 1.1.绘制视图 (04:30)
1-2 [UIKit与Quartz 2D绘图技术] 20150522第十六期直播答疑_上 (54:27)
1-3 [UIKit与Quartz 2D绘图技术] 20150522第十六期直播答疑_下 (48:29)
1-4 [UIKit与Quartz 2D绘图技术] 1.1.1.视图绘制周期 (05:23)
1-5 [UIKit与Quartz 2D绘图技术] 1.1.2.绘制实例:填充矩形 (06:29)
1-6 [UIKit与Quartz 2D绘图技术] 1.1.3.填充与描边 (07:49)
1-7 [UIKit与Quartz 2D绘图技术] 1.2.Quartz图形上下文 (15:25)
1-8 [UIKit与Quartz 2D绘图技术] 1.3.Quartz路径1-基本图元和闭合路径 (09:31)
1-9 [UIKit与Quartz 2D绘图技术] 1.1.4.绘制图像和文本 (13:40)
1-10 [UIKit与Quartz 2D绘图技术] 1.4.1.坐标系 (09:45)
1-11 [UIKit与Quartz 2D绘图技术] 1.4.2.2D图形的基本变换 (06:03)
1-12 [UIKit与Quartz 2D绘图技术] 1.4.3.CTM变换矩阵(1.平移变换) (04:42)
1-13 [UIKit与Quartz 2D绘图技术] 1.4.3.CTM变换矩阵(2.缩放变换) (01:29)
1-14 [UIKit与Quartz 2D绘图技术] 1.4.3.CTM变换矩阵(3.旋转变换) (05:52)
1-15 [UIKit与Quartz 2D绘图技术] 1.4.4.仿射(affine)变换 (04:52)
1-16 [UIKit与Quartz 2D绘图技术] 1.3.Quartz路径2-实例:曲线定义路径 (08:45)
2-1 [图像处理] 2.1.使用图像-创建图像对象 (10:47)
2-2 [图像处理] 2.1.使用图像-图像来源 (14:27)
2-3 [图像处理] 2.2.使用图像实例 (13:57)
2-4 [图像处理] 2.3.从设备图片库选取或从照相机抓取 (07:47)
2-5 [图像处理] 2.4.从设备图片库选取或从照相机抓取实例 (23:13)
3-1 [动画技术] 3.1.视图动画 (05:55)
3-2 [动画技术] 3.1.1.动画块 (12:12)
3-3 [动画技术] 3.1.2.动画生命周期事件 (07:47)
3-4 [动画技术] 3.1.3.过渡动画 (12:27)
3-5 [动画技术] 3.2.1.图层 (12:14)
3-6 [动画技术] 3.2.2.隐式动画 (08:52)
3-7 [动画技术] 3.2.3.显式动画 (14:53)