简介这份Swift-iOS贝塞尔曲线绘制图表的示例工程面向有一定iOS开发基础、希望深入理解UIBezierPath自定义绘图的开发者。资源围绕图表绘制场景讲解三次贝塞尔曲线addCurve(to:controlPoint1:controlPoint2:)与二次贝塞尔曲线addQuadCurve(to:controlPoint:)两种核心方法演示如何通过创建UIView子类、重写draw(_:)方法、构建路径并调用stroke()实现平滑数据线。压缩包共25个文件以6个Swift源文件为逻辑主体辅以3个.h头文件、3个plist配置、2个storyboard及1个xib界面布局文件另有4张PNG图示整体仅156KB结构紧凑。工程内含BezierCurveLineTest-master完整Xcode项目包含单元测试与UI测试目标便于直接运行观察曲线平滑效果。已有700人学习过此资源。通过学习该工程读者可掌握UIBezierPath在折线图平滑处理中的实操方法理解控制点对曲线形态的影响进而灵活运用于自定义图表、动画路径等场景提升iOS界面绘制的专业度。1. Swift 里用贝塞尔曲线画图表黑匣子之外的轻量控盘接手某跨平台系统的 iOS 端图表改造时我发现团队啃了半年第三方图表库最终卡在内存只升不降的死局里换回原生绘制反而一个月就交付。这套 Swift iOS 贝塞尔曲线绘制图表资源的主线就是教你把折线图、曲线图、面积图从数据到 Canvas 一帧一帧画出来全程只需要 UIKit 和 CoreGraphics。它最适合三类场景高频刷新但数据量不大的仪表盘、需要嵌入 ScrollView 做横向滑动的时序图以及不想为了画一个曲线就拖进来几百 KB 静态库的项目。你将要复现的不只是一个图表而是一条可以随手定制、随时停下来改代码的自由路径。2. 绘制原理先搞明白贝塞尔曲线在图表里充当什么角色再动手写坐标映射2.1 为什么图表曲线的本质是二次贝塞尔UIKit 里的 UIBezierPath 之所以适合做图表曲线是因为曲线绘制过程天然模拟了折线段到平滑曲线过渡的数学过程。一个图表数据点 x[i], y[i] 在屏幕上是一个 CGPoint两两相连只是折线若想让曲线在视觉上圆润、连续、没有突兀的尖角就需要引入控制点。在 Swift 中最常用的曲线绘制方法是addCurve(to:controlPoint1:controlPoint2:)它是三次贝塞尔由两个控制点共同决定线段在两点之间的弯曲方向与曲率。这比二次贝塞尔addQuadCurve(to:controlPoint:)多出一个控制维度用来模仿自然连续的光滑走势正好合适因为图表曲线并不追求严格的数学拟合而是要求在视觉上符合数据趋势又不撞上人工痕迹。我一般不会在绘制循环里直接算贝塞尔公式本身——那是 Core Graphics 已经做好的事我只需决定控制点怎么给。控制点的选取常见做法是取相邻两点的中点作为锚点再用当前点与前后点的斜率推算出控制点位置。这套做法有个专门名字叫 Catmull-Rom 样条转贝塞尔视觉上会得到穿过每个数据点的平滑曲线而不是偏离数据点的拟合曲线。2.2 图表的坐标系变换从业务数值到屏幕像素的映射公式图表绘制最容易被轻视的环节是坐标变换。你以为拿到一个value: CGFloat就能直接画但真实业务里的数值范围可能是 0 到 100 万屏幕像素范围只是 0 到 375 的宽中间必须经过一次线性映射。映射公式并不复杂。设minValue与maxValue为业务数据上下限plotHeight为绘图区高度那么某个值对应的像素 y 坐标是let normalized (value - minValue) / (maxValue - minValue) let y plotTop (1.0 - normalized) * plotHeight这段代码的逻辑是先做一个归一化把业务值压到 0 到 1 区间再通过反转向量换算成屏幕坐标。这里的plotTop是绘图区域顶部 Y 坐标之所以要加它是因为图表可能内嵌在某个自定义视图中绘图区未必从屏幕坐标原点开始而在 iOS 的视图坐标系里Y 轴向下增长所以业务值最大的点落在屏幕坐标值最小的区域这就是1.0 - normalized的处理来源。参数层面有三个坑值得提前讲清楚一是maxValue不能直接取所有数据的最大值否则曲线会顶上边界一般要乘一个 1.1 或者加一个合理的 padding二是横轴映射与纵轴不同它是基于数据下标与绘图区宽度的除法x paddingLeft CGFloat(index) / CGFloat(count - 1) * plotWidth三是如果数据点只有一个count - 1会变成 0需要在调用前做一次独立分支判断。2.3 数据源预热顺序先把数据排序与去抖处理做完再喂给绘制层很多人在自定义视图的draw(_:)或layoutSubviews()里直接跑业务逻辑图表一旦复杂主线程的负担会集中在渲染函数里。正确的处理顺序是在模型层完成数据清洗与聚合输出一份已经排好序、格式统一的[CGPoint]数组再交给绘图层做贝塞尔变换。我通常会额外保留一个中间结构用于保存每个点对应的原始业务值与屏幕坐标方便触摸交互时反查数据。绘制层只消费这一份中间结构因此想要重绘只需要调用setNeedsDisplay()不需要重新走一遍数据处理。这样做还有一个隐性的好处后续如果要加阈值线、数据标注、点击弹层都能直接在中间结构上做不再触碰底层绘制逻辑。3. 代码实战折线图、平滑曲线图、填充面积图三条路径逐一落地3.1 绘制基础折线的项目骨架如果这套资源只教一个能力那一定是先画出一条最低成本的折线它验证了坐标变换、路径构建、渲染三层是否通畅。final class LineChartView: UIView { var dataPoints: [CGPoint] [] { didSet { setNeedsDisplay() } } override func draw(_ rect: CGRect) { guard dataPoints.count 1 else { return } let path UIBezierPath() path.move(to: dataPoints[0]) for point in dataPoints.dropFirst() { path.addLine(to: point) } path.lineWidth 2.0 path.lineJoinStyle .round path.lineCapStyle .round UIColor.systemBlue.setStroke() path.stroke() } }这个 View 的渲染逻辑一句话就能讲清dataPoints被赋值后自动触发setNeedsDisplay()系统在下一个绘制周期调用draw(_:)然后按顺序连线。其中lineJoinStyle和lineCapStyle设置为.round是为了消除折线转折处的刺眼棱角这在折线图里成本最低、效果却最明显。如果只是做折线这套代码就已经能跑。但关键是你要知道这个骨架没有处理 contentScaleFactor 的适配问题。在 Retina 屏幕下UIBezierPath 默认会以 points 为单位绘制而 Core Graphics 的绘图坐标也是 points所以不需要手动乘以 scale你只需要确认绘图区域的 bounds 与实际渲染尺寸匹配即可。3.2 从折线升级到平滑曲线控制点计算的核心实现要升级到平滑曲线核心是控制点。我常用的算法是基于中点锚点法private func addSmoothCurve(to path: UIBezierPath, points: [CGPoint]) { guard points.count 2 else { for point in points.dropFirst() { path.addLine(to: point) } return } for i in 0..(points.count - 1) { let current points[i] let next points[i 1] let mid CGPoint(x: (current.x next.x) / 2.0, y: (current.y next.y) / 2.0) let prev i 0 ? points[i - 1] : current let nextNext i 2 points.count ? points[i 2] : next let controlOffsetX (next.x - prev.x) / 4.0 let control1 CGPoint(x: mid.x - controlOffsetX, y: mid.y) let control2 CGPoint(x: mid.x controlOffsetX, y: mid.y) if i 0 { path.move(to: points[0]) } path.addCurve(to: next, controlPoint1: control1, controlPoint2: control2) } }这套写法的逻辑是先把每一段的中点计算出来作为曲线从上一点走向下一点的参照然后控制点横坐标取中点左右偏移量偏移量基于前一点与后一点在 X 轴上的距离加大或缩减。纵坐标取当前中点本身的值从而让曲线在穿越中点时保持水平趋势避免出现尖角。这里的常数项/ 4.0是张力系数的倒数值越小曲线越紧贴折线值越大曲线越松弛。我一般把 4.0 做成一个可调参数暴露出来因为你放大查看图表时会发现某些数据波动幅度大、点距不一致的场景里这个固定值会让曲线过冲或者不够贴合调整成 3.0 或 6.0 会得到完全不同的视觉反馈。3.3 面积图与渐变填充路径闭合方式决定渲染结果面积图的实现建立在曲线路径之上只是多了一步闭合底部。闭合路径的常见做法是先画一遍曲线然后从曲线终点直线连到左下角再沿底边连回起点最后关闭路径填充颜色。func filledAreaPath(from points: [CGPoint], bottomY: CGFloat) - UIBezierPath { let path UIBezierPath() addSmoothCurve(to: path, points: points) guard let last points.last else { return path } path.addLine(to: CGPoint(x: last.x, y: bottomY)) path.addLine(to: CGPoint(x: points[0].x, y: bottomY)) path.close() return path }这个方法的参数bottomY通常是绘图区底部的坐标也就是数值最小值对应的像素值。整个路径构建完以后你可以用带透明度的 fill 做纯色填充也可以用CGGradient做渐变。渐变填充没有你想的那么复杂只需要在绘制上下文里先裁剪到填充区域路径再调用drawLinearGradient。但有一个顺序问题addSmoothCurve的内部实现里第一次move(to:)是移动到points[0]它会重置当前路径的起始点所以你必须先构建曲线再补底部直线。反过来先画矩形再叠加曲线会变成两条不相干的子路径。渐变填充的代码这样写guard let context UIGraphicsGetCurrentContext() else { return } context.saveGState() path.addClip() let colors [UIColor.systemBlue.withAlphaComponent(0.4).cgColor, UIColor.systemBlue.withAlphaComponent(0.05).cgColor] as CFArray let gradient CGGradient(colorsSpace: nil, colors: colors, locations: [0.0, 1.0])! context.drawLinearGradient(gradient, start: CGPoint(x: rect.midX, y: rect.minY), end: CGPoint(x: rect.midX, y: rect.maxY), options: []) context.restoreGState()逻辑说明addClip()的作用是让后续的渐变只作用于路径闭合区域内部locations参数决定两个颜色的过渡位置设置 [0.0, 1.0] 表示从起点到终点完成完整过渡。saveGState与restoreGState成对出现保证裁剪不会泄漏到其他绘制元素的上下文里否则你后画的网格线可能会出现不明原因的半透明效果。3.4 绘制网格线与坐标轴标签让图表可读性提升一档网格线看起来是小事但它在自定义图表里往往比曲线本身更能体现工程细节。因为你画的是 UIKit 原生视图没有系统预设的网格样式所有的刻度间距、线条样式都要自己算。这里我给出一段绘制水平网格线的写法func drawHorizontalGrid(rect: CGRect, rowCount: Int) { let path UIBezierPath() for i in 0...rowCount { let y rect.minY (rect.height / CGFloat(rowCount)) * CGFloat(i) path.move(to: CGPoint(x: rect.minX, y: y)) path.addLine(to: CGPoint(x: rect.maxX, y: y)) } path.lineWidth 0.5 UIColor.systemGray.withAlphaComponent(0.3).setStroke() path.stroke() }这段代码把绘图区高度均分为rowCount段每段画一条横线。参数上我有两个习惯一是lineWidth选择 0.5 配合透明度 0.3视觉上网格线只是背景辅助不会盖过数据曲线二是 y 轴的坐标值标签不要在 draw 里用字符串绘制而是创建若干个 UILabel 子视图或 CATextLayer然后在布局阶段更新文字内容否则文字在重绘时会频繁走一遍字体渲染拖慢刷新频率。4. 避坑排查贝塞尔图表高频刷新、动画打断与上下文泄漏的三类现场4.1 刷新卡顿与内存只升不降现象在数据点数量约 800、刷新频率每秒 10 次时主线程 CPU 占比从 12% 一路冲到 60%并且 Instruments 显示内存只能升高不回落。原因问题出在两处。第一数据数组每次刷新重建旧数组没有被及时释放ARC 在低内存告警前不会强制回收到系统第二draw(_:)内部每次构建大量临时 UIBezierPath 对象这些对象在绘制中被上下文持有导致释放周期延后到下一次 RunLoop。解决将曲线路径构建对象提取为视图属性只在数据点数量或布局尺寸变化时重建普通刷新改为只更新已有点的 Y 坐标并调用更轻量的局部重绘方法。常见做法是维护一个已缓存路径每次只更新bounds整个绘图周期内尽量复用 path 对象。从那以后我每次做高频刷新图表都要检查 Instruments 里UIBezierPath相关的 allocation 数量级。4.2 曲线出现锯齿或模糊边缘现象模拟器上看起来正常的曲线在真机上边缘像蒙了一层雾尤其是细线和渐变交界处格外明显。原因这是内容缩放与像素对齐的问题。UIKit 的视图绘制单位是 points但渲染最终要落到物理像素如果视图的contentScaleFactor与屏幕适配有偏差或绘图 rect 的原点不是整数像素GPU 会对边缘做插值抗锯齿结果就是发虚。解决在draw(_:)中得到UIGraphicsGetCurrentContext()后先调用context.setShouldAntialias(true)并确保绘图 rect 使用整数化处理。在真机上跑一次之后你会发现线条锐利程度完全不一样。4.3 曲线首尾出现莫名截断现象曲线明明从 x 0 开始画但左侧第一段曲线的一部分被裁掉或者右端最后一个点的圆头被切掉一半。原因lineCapStyle设置为.round后线段的末尾会延伸出约半个线宽的距离这条额外长度超出了绘图 rect 的边界被画布裁剪。解决在构建路径前给绘图区域做一个内边距 paddingLeft 和 paddingRight让曲线覆盖的实际范围小于绘图可视范围至少留出lineWidth / 2的余量。这也是为什么坐标映射的公式里横轴起点不是 0 而是 paddingLeft。4.4 旋转屏幕后曲线错位现象设备从竖屏旋转到横屏时曲线没有跟着填充区域走而是出现左右错位、顶部空隙变大的情况。原因draw(_:)执行时机在布局更新之前旋转后视图的bounds.size发生变化但路径是基于旧尺寸构建的。解决在视图的layoutSubviews()里重新触发setNeedsDisplay()并且在构建路径时不要用rect参数做硬编码尺寸改成读取bounds。注意layoutSubviews()在旋转期间会被多次调用所以在其中加一个简单的防抖布尔变量只在尺寸真正变化时重绘。4.5 大量数据点下曲线过于密集看不清走势现象数据点数量超过 2000 时整条曲线变成一条黑色色带完全看不到趋势和波动。原因相邻两个数据点在 X 轴上的像素距离不足 1pt多个点的描边叠加在一起加上透明度重合视觉上就变成粗黑线。解决在数据预热阶段做降采样处理。常见做法是每隔 N 个点取一个代表点N 的取值由绘图区宽度除以点数估算保证每个点之间至少有 2pt 水平距离。降采样前记得对 Y 轴区间做一次极值扫描避免恰好跳过峰值点导致曲线丢失重要特征。5. 完整复现组装一个可复用的图表绘制组件支持折线、平滑曲线与区域填充一键切换5.1 组件结构设计把前面所有代码收拢成一个可复用组件的关键是把配置项和数据分离开。视图内部不直接持有业务数组而是持有一个结构体这个结构体描述了图表要呈现的样子和当前的数据快照。这部分我给的代码实现可以在一个文件里写完但当你需要接多折线时则要拆成三个文件配置模型、数据转换器、绘制视图。资源包里的示例工程就是按这个划分来组织的你复制过去改数据源即可。5.2 ChartConfig 配置模型struct ChartConfig { var lineWidth: CGFloat 2.0 var curveTension: CGFloat 4.0 var showGrid: Bool true var showGradient: Bool false var gridRowCount: Int 4 var paddingLeft: CGFloat 16 var paddingRight: CGFloat 16 var paddingTop: CGFloat 24 var paddingBottom: CGFloat 16 var lineColor: UIColor .systemBlue var fillColor: UIColor .systemBlue.withAlphaComponent(0.2) }这个配置模型的每个字段都直接对应绘制阶段用到的参数。curveTension就是第 3.2 节里提到的/ 4.0中的分母把它放到配置里意味着你可以运行时改变曲线的紧绷程度而不需要改绘制算法。5.3 DataMapper业务数值转屏幕坐标的独立工具struct DataMapper { let plotRect: CGRect func point(at index: Int, value: CGFloat, minValue: CGFloat, maxValue: CGFloat) - CGPoint { let normalizedX plotRect.width 0 ? CGFloat(index) : 0 let normalizedY (value - minValue) / (maxValue - minValue) let x plotRect.minX normalizedX let y plotRect.maxY - normalizedY * plotRect.height return CGPoint(x: x, y: y) } }这个结构体的逻辑很直白plotRect是已经扣除 padding 之后的绘图区横坐标按数据下标线性递增纵坐标按业务值归一化后反向映射。它没有包含降采样逻辑那是使用组件之前要处理的同一个映射器不会感知数据密度。你在实际使用中要注意maxValue - minValue如果为 0会产生除零问题所以调用方要保证业务数据存在数值波动或者至少给一个容错分支。5.4 ChartView绘制层与重绘策略final class ChartView: UIView { var config ChartConfig() var series: [(points: [CGPoint], isSmooth: Bool, useFill: Bool)] [] { didSet { setNeedsDisplay() } } override func draw(_ rect: CGRect) { let plotRect bounds.inset(by: UIEdgeInsets( top: config.paddingTop, left: config.paddingLeft, bottom: config.paddingBottom, right: config.paddingRight )) if config.showGrid { drawGrid(plotRect: plotRect) } for item in series { let path UIBezierPath() if item.isSmooth { addSmoothCurve(to: path, points: item.points, tension: config.curveTension) } else { guard let first item.points.first else { continue } path.move(to: first) for point in item.points.dropFirst() { path.addLine(to: point) } } config.lineColor.setStroke() path.lineWidth config.lineWidth path.stroke() if item.useFill { fillPath(from: path, plotRect: plotRect) } } } }这里的series数组允许同时绘制多条曲线每条曲线都带有自己的平滑与填充开关。完整组件里会配合触摸层做数据点的命中检测这里只保留核心绘制路径方便你对整个渲染管线做单元测试。使用它的方式在你的 ViewController 里是三个步骤配置 config 的数值、把业务数据通过 DataMapper 转成点集、赋值给 series。6. 进阶用法给图表注入动态曲线动画并在真机上做一次完整的帧率验证图表从静态到动态差的不是一个定时器而是一条可持续插值的曲线。我常做的是用 CADisplayLink 驱动绘制层的 progress 属性让它从 0 增长到 1同时把传入 series 的所有点做一个整体偏移取数据数组的前Int(progress * pointCount)个点送给绘制层。objc private func tick(_ link: CADisplayLink) { progress 0.02 if progress 1.0 { link.invalidate() progress 1.0 } let visibleCount max(1, Int(progress * CGFloat(allPoints.count))) chartView.series [([CGPoint](allPoints.prefix(visibleCount)), true, true)] }这段代码的逻辑是每帧更新进度值并按比例截取前缀点阵作为当前帧绘制内容。因为 series 属性 setter 调用了setNeedsDisplay()所以整个链路就是一个典型的响应式刷新模型。真机验证时用 Instruments 的 Core Animation 工具观察 FPS在 iPhone 真机模拟 60 FPS 时只要绘制层不做重复路径构建曲线动画保持满帧并不算难。验证方法我再附带一个纯代码方案在draw(_:)前后用 CACurrentMediaTime() 记录耗时连续采样几帧后取平均值。如果单帧绘制超过 4ms就该回头检查是否在绘制函数里做了数据排序或字符串格式化。这套资源里的完整示例工程把上述所有代码整合成了一个可以自定义曲线数量、填充、动画开关的 Demo。最后提醒一句第三方图表库不是你偷懒的借口当你需要把一个曲线图嵌进内存紧张的 App 时原生贝塞尔手绘才是那个最稳的底牌。希望帮到你。本文还有配套的精品资源点击获取