Swift Academy · 课时

使用 Core Graphics 自定义绘图

Q: 「使用 Core Graphics 自定义绘图」这节课中我会学到什么？

在 draw(_:) 中绘制路径和形状。 你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在 draw(_:) 中绘制路径和形状。

使用 Core Graphics 自定义绘图 是 CoddyKit 上的免费 Swift Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Swift Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Swift Academy 课程共包含 4 节课。

何时绘制自定义内容

当图层和图像无法表达某种形状时，例如图表、签名和自定义控件，您可以使用 Core Graphics（Quartz 2D）自行绘制。

重写 draw(_:)

继承 UIView 并重写 draw(_:)。UIKit 会将配置好的上下文传入该方法，您可以在那里发出绘制命令。

import UIKit
final class ChartView: UIView {
    override func draw(_ rect: CGRect) {
        // drawing commands go here
    }
}

图形上下文

在 draw(_:) 内部获取当前的 CGContext。它是一个有状态的画布：您先设置颜色和线宽，然后进行描边或填充。

override func draw(_ rect: CGRect) {
    guard let ctx = UIGraphicsGetCurrentContext() else { return }
    ctx.setFillColor(UIColor.systemTeal.cgColor)
    ctx.fill(rect)
}

构建路径

CGPath（或 UIBezierPath）用于描述直线、曲线和形状。请先移动到起点，然后添加直线和曲线。

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0))
path.addLine(to: CGPoint(x: 100, y: 50))
path.addLine(to: CGPoint(x: 0, y: 100))
path.close()

描边与填充

描边会勾勒路径的轮廓，填充会为其内部着色。请设置颜色和宽度，然后调用 stroke() 或 fill()。

UIColor.systemRed.setStroke()
let line = UIBezierPath()
line.lineWidth = 3
line.move(to: CGPoint(x: 10, y: 10))
line.addLine(to: CGPoint(x: 90, y: 90))
line.stroke()

曲线

通过二次（addQuadCurve）或三次（addCurve）贝塞尔线段并指定控制点，即可添加平滑曲线。

let p = UIBezierPath()
p.move(to: CGPoint(x: 0, y: 100))
p.addCurve(to: CGPoint(x: 200, y: 100),
           controlPoint1: CGPoint(x: 50, y: 0),
           controlPoint2: CGPoint(x: 150, y: 200))

上下文状态：保存与恢复

上下文是有状态的。请将变换和裁剪包裹在 saveGState()/restoreGState() 中，避免更改影响后续绘制。

ctx.saveGState()
ctx.translateBy(x: 50, y: 50)
ctx.rotate(by: .pi / 4)
// draw rotated content
ctx.restoreGState()

渐变与阴影

Core Graphics 可以直接在上下文中绘制渐变（使用 CGGradient 和 drawLinearGradient）以及阴影（使用 setShadow(offset:blur:color:)）。

ctx.setShadow(offset: CGSize(width: 0, height: 2),
              blur: 4,
              color: UIColor.black.cgColor)

裁剪

添加路径并调用 clip()，即可将后续绘制限制在该区域内，这对圆角图像或遮罩填充很有用。

let clipPath = UIBezierPath(ovalIn: rect)
clipPath.addClip()
// drawing now constrained to the oval

性能与 setNeedsDisplay

draw(_:) 在 CPU 上运行，开销相对较大。请仅在需要时通过 setNeedsDisplay() 触发重绘，并保持绘制代码精简。

func updateData() {
    self.data = newData
    setNeedsDisplay() // schedule one redraw
}

离屏渲染

对于可复用的位图，请使用 UIGraphicsImageRenderer 将内容渲染到图像中，而不是在每一帧都重新绘制。

let renderer = UIGraphicsImageRenderer(size: CGSize(width: 100, height: 100))
let image = renderer.image { ctx in
    UIColor.systemBlue.setFill()
    ctx.fill(CGRect(x: 0, y: 0, width: 100, height: 100))
}

快速检查：Core Graphics

请检验您对自定义绘制的理解。

回顾：使用 Core Graphics 自定义绘制

重写 draw(_:) 并向 CGContext 发出命令：使用直线和贝塞尔曲线构建路径，然后进行描边或填充。使用 saveGState()/restoreGState() 隔离变换和裁剪，并直接添加渐变、阴影和裁剪区域。

绘制会占用 CPU，因此只通过 setNeedsDisplay() 在需要时重绘，并使用 UIGraphicsImageRenderer 缓存可复用的位图。

常见问题解答

「使用 Core Graphics 自定义绘图」课时是免费的吗？

是的 — 「使用 Core Graphics 自定义绘图」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Swift Academy 课程的其余内容，请升级到 CoddyKit PRO。 Swift Academy 课程共包含 4 节课。

「使用 Core Graphics 自定义绘图」这节课中我会学到什么？

在 draw(_:) 中绘制路径和形状。你通过在浏览器中直接运行的动手代码来练习 Swift Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Swift Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Swift Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「使用 Core Graphics 自定义绘图」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Swift Academy 课中编写并运行代码吗？

能。每节 Swift Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

CALayer 基础
隐式与显式动画
变换与三维效果
使用 Core Graphics 自定义绘图

← 返回 Swift Academy