Apple 提供了多种用于绘制图形的方式,它们面向不同层级、用途和性能场景。以下是常见的绘图技术及其差异对比:
绘图技术
1、Core Graphics (Quartz 2D)
类型:底层 C 语言绘图 API。
方式:通过 CGContext 在 draw(_:) 或 drawRect: 中绘制。
适用场景:需要完全控制绘图流程,如自定义图表、图形渲染等。
优点:性能高效,精细控制每个像素,可用于打印输出等精度要求高的场景。
缺点:编写复杂,需要处理坐标系(macOS 和 iOS 默认不同)。
文章:《Apple二维图像绘制框架Core Graphics》。
2、NSBezierPath / UIBezierPath
类型:面向对象的路径构建 API(macOS 用 NSBezierPath,iOS 用 UIBezierPath)。
方式:构建路径后用于 Core Graphics 或 CALayer。
适用场景:需要使用曲线、图形路径的场景,代码比 Core Graphics 简洁。
优点:易于使用,支持曲线、线条、路径等;
缺点:仍需在 draw(_:) 中配合 CGContext 使用,性能比不上 Layer。
3、CALayer
类型:核心动画中的图层类,是所有图层的基类。
功能:显示内容(如图片、颜色),管理动画,图层变换(旋转、缩放等)。
绘图方式:可设置 contents,或通过重写 draw(in:) 来使用 Core Graphics。
文章:《Apple渲染图像、动画的CALayer》。
4、CAShapeLayer
类型:CALayer 的子类,专门用于矢量图形绘制。
特点:自动根据 path 属性绘制,使用 GPU 渲染,性能优于 draw(_:);可直接设置 strokeColor、fillColor 等属性;可轻松配合动画(如进度环动画)。
优点:性能优秀;代码简洁;易于添加动画;
缺点:只支持路径类绘制,无法做复杂像素绘制。
文章:《Core Animation绘制图像路径CAShapeLayer》。
5、Metal / MetalKit
类型:Apple 的低层 GPU 编程框架。
适用场景:3D 渲染、大量粒子、游戏、图形模拟。
优点:极致性能,GPU 加速;
缺点:学习成本高,不适合简单图形任务。
6、SwiftUI Shape / Canvas
类型:SwiftUI 提供的高层图形接口。
方式:Shape 协议定义路径;Canvas 可做低层渲染。
优点:更现代、更易组合;与 SwiftUI 生态无缝集成;
缺点:对于复杂自定义绘图仍不如 Core Graphics 灵活;不支持 macOS 10.x,SwiftUI 版本限制。
文章:《SwiftUI图像形状Shape》和《SwiftUI绘画视图Canvas》。
总结
在SwiftUI中推荐使用Shape和Canvas绘制图形,适合绘制简单途径。
不是SwiftUI的话,简单的图形可以使用CALayer,通过GPU绘制,性能高。
矢量图形绘制,可以使用 BezierPath 或者 CAShapeLayer,其中 CAShapeLayer 性能更好,支持动画,BezierPath需要手动设置动画。
对于游戏、3D等复杂绘制图形场景,推荐使用 Metal,性能高,控制粒度极细。
如果需要绘制任意图形,可以使用Core Graphics,使用C接口绘制图形,属于Apple底层的图形绘制框架,例如SwiftUI的Canvas也是依赖Core Graphicsh实现图形绘制的。
相关文章
1、Apple二维图像绘制框架Core Graphics:https://fangjunyu.com/2024/12/16/apple%e4%ba%8c%e7%bb%b4%e5%9b%be%e5%83%8f%e7%bb%98%e5%88%b6%e6%a1%86%e6%9e%b6core-graphics/
2、Apple渲染图像、动画的CALayer:https://fangjunyu.com/2025/07/02/apple%e6%b8%b2%e6%9f%93%e5%9b%be%e5%83%8f%e3%80%81%e5%8a%a8%e7%94%bb%e7%9a%84calayer/
3、Core Animation绘制图像路径CAShapeLayer:https://fangjunyu.com/2025/07/31/core-animation%e7%bb%98%e5%88%b6%e5%9b%be%e5%83%8f%e8%b7%af%e5%be%84cashapelayer/
4、SwiftUI图像形状Shape:https://fangjunyu.com/2024/12/14/swiftui%e5%86%85%e7%bd%ae%e5%bd%a2%e7%8a%b6/
5、SwiftUI绘画视图Canvas:https://fangjunyu.com/2024/12/16/swiftui%e7%bb%98%e7%94%bb%e8%a7%86%e5%9b%becanvas/