Core Animation绘制图像路径CAShapeLayer

CAShapeLayer 是 Apple 提供的 Core Animation 框架中的一个图层类（CALayer 的子类），用于高效绘制矢量图形路径。它与 CGPath（或 UIBezierPath / NSBezierPath）配合使用，可以绘制矩形、圆形、贝塞尔曲线、任意图形等，广泛应用于：

1、绘制选区、边框、形状等

2、实现路径动画

3、创建虚线框、环形进度条

4、UI 高亮/遮罩效果

5、动态绘图（替代 draw(_:) 的高性能方案）

CAShapeLayer 是什么？

官方定义：

A layer that draws a cubic Bezier spline in its coordinate space.（一个可以在其坐标空间中绘制贝塞尔路径的图层）

它是 CALayer 的一个子类，专门用于绘制 CGPath 类型的路径。

常用属性

一、路径与形状

1、path：CGPath 类型，用来定义形状路径（必需）；

shapeLayer.path = myPath

2、fillRule：填充规则，nonZero 或 evenOdd（中间挖空时用）；

3、lineCap：线条端点形状（.butt .round .square）；

shapeLayer.lineCap = .round

4、lineJoin：线条交点的连接方式（.miter .round .bevel）；

shapeLayer.lineJoin = .round

5、lineDashPattern：虚线样式（如 [5, 3] 表示 5 实线 + 3 空白）；

6、lineDashPhase：虚线起始偏移量；

shapeLayer.lineDashPattern = [5,2]

7、miterLimit：用于 miter 类型线条连接的限制角度。

二、绘制外观

1、fillColor：填充颜色（例如 NSColor.red.cgColor）；

shapeLayer.fillColor = NSColor.red.cgColor

2、strokeColor：描边颜色；

shapeLayer.strokeColor = NSColor.black.cgColor

3、lineWidth：描边宽度；

shapeLayer.lineWidth = 2

4、opacity：整体透明度（来自 CALayer）。

三、动画支持（继承自CALayer）

可以对 CAShapeLayer 的属性进行动画，比如 strokeEnd 动画可以画出“进度条”：

1、strokeStart：描边开始位置，0 ~ 1；

shapeLayer.strokeStart = 1

2、strokeEnd：描边结束位置，0 ~ 1；

3、transform：变换（缩放、旋转等）；

4、bounds：尺寸，来自 CALayer；

5、position：位置；

6、mask：遮罩（也是 CALayer）。

使用场景

let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = NSColor.systemBlue.cgColor
shapeLayer.lineWidth = 2
shapeLayer.fillColor = NSColor.systemBlue.withAlphaComponent(0.3).cgColor
shapeLayer.path = CGPath(rect: someRect, transform: nil)
view.layer?.addSublayer(shapeLayer)

绘制优势

1、性能好：由 GPU 渲染，效率高，适合动画和动态交互；

2、不需要重写 draw(_:)：直接设置属性即可看到结果，代码更解耦；

3、支持动画：可以给路径、颜色等属性添加隐式或显式动画；

4、高度可定制：支持任意路径、线条样式、虚线、圆角等；

5、可叠加使用：可以随意添加多个形状图层，组合出复杂 UI。

应用场景

1、截图工具中的选区框：拖动绘制矩形路径；

2、进度环、环形计时器：绘制圆形路径，控制 strokeEnd 动态变化；

3、虚线边框按钮：使用 lineDashPattern 实现虚线描边；

4、动态绘图、拖动形状：实时更新 path 来响应用户操作。

总结

CAShapeLayer 是绘制路径图形的“图层级别的利器”，高性能、低耦合，特别适合动态 UI 和自定义形状绘图场景。

相关文章

1、Apple动画框架Core Animation：https://fangjunyu.com/2025/07/04/apple%e5%8a%a8%e7%94%bb%e6%a1%86%e6%9e%b6core-animation/

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/