简介这是一份Swift示例工程面向iOS开发者演示如何基于UIBezierPath绘制平滑的贝塞尔曲线图表。通过自定义UIView子类并重写draw方法工程完整展示了二次与三次贝塞尔曲线的构建、控制点设置以及图表描边渲染的关键流程适合需要优化折线图平滑度或实现自定义图表样式的开发场景。压缩包共25个文件包含6个源代码文件、4张PNG图片、storyboard与xib界面布局、属性列表及Xcode工程配置整体仅156KB结构紧凑便于快速查看并运行。已有700人学习下载示例核心逻辑围绕move、addCurve与addQuadCurve展开清楚解释了一、两个控制点如何影响曲线弧度可帮助读者从代码层面理解贝塞尔曲线的几何本质并将其灵活应用到股票K线、统计图表等场景中。工程不依赖第三方图表库直接基于系统Core Graphics实现学习成本低且便于二次修改代码与界面可对照学习尤其适合希望从原理层面掌握iOS绘图与图表实现的初中级开发者。1. 从行情看板到项目骨架Swift 里贝塞尔曲线是怎么变成图表的做 Swift 开发的朋友应该都有过这种经历产品抛过来一张设计稿折线图上要有渐变面积、圆润曲线、入场动画图表库要么定制不动要么包体太大最后只能自己动手。这套项目的核心就是用 UIBezierPath 在 iOS 上从零绘制一套图表组件没有依赖任何第三方绘图库。它把数据点换算成屏幕坐标再用 Catmull-Rom 样条转三次贝塞尔生成平滑曲线配合 CAShapeLayer 渲染实现折线图、面积图、渐变填充以及 strokeEnd 入场动画。适合需要深度定制图表样式的 iOS 开发者也适合刚接触 Core Graphics 但想在真实场景里练手的人照着这份源码能看懂一条数据是怎么一步步变成屏幕上那条带弧度的曲线。2. 整体架构与工程结构三个层次把数据变成可动画的图层2.1 三层架构Model、Renderer、View 各管什么拆这个 Swift 图表项目时最先看到的是它的分层思路。虽然工程不大但它没有把逻辑全塞进一个 UIView 里而是按「数据模型 → 渲染器 → 视图容器」拆成了三层每一层职责很单一。Model 层定义的是图表的最小数据单元比如一个 ChartPoint 结构体包一个 x、y 坐标Renderer 层负责把点数组变成 CGPath这一层只和坐标打交道不关心视图的 frame 和显示样式View 层持有 CALayer 子类把 Renderer 产出的 path 设置给 CAShapeLayer并管理动画和触摸交互。这种拆法最直接的收益是想要换一种曲线算法只需要改 Renderer想要把折线图换成柱状图只需要新增一个 RendererView 层几乎不用动。实际项目里图表最容易出问题的就是「样式和逻辑揉在一起改一处崩三处」这里是给二维数据映射提供了一个清晰边界比较适合做二次开发时参考。2.2 工程目录与核心文件职责项目源码里的文件划分很直白打开后基本能猜到每个文件是干什么的我整理了一份文件职责表方便你下载后对照着看。文件/目录职责ChartPoint.swift图表数据模型包含 x、y 值支持 Codable 方便对接接口AxisRange.swift坐标轴值域记录 x、y 的 min/max用于归一化PathSmoother.swift贝塞尔曲线生成器核心算法所在LineChartRenderer.swift将数据点映射为坐标并组装 UIBezierPathChartView.swift容器视图持有 CAShapeLayer、CAGradientLayer负责渲染与动画ChartTouchHandler.swift触摸命中检测找最近数据点画十字线Theme.swift颜色、线宽、动画时长等样式配置这种把「算法」和「视图」分文件的组织方式在源码阅读体验上很舒服。想调曲线平滑度直接去 PathSmoother想改动画节奏去 ChartView 里找 CABasicAnimation不用在几百行代码里反复上下滚动找某个方法。2.3 渲染管线一次 render() 里发生了什么理解了文件分工再顺一遍数据流就很清楚了。ChartView 对外暴露的接口很简单开发者调 dataPoints 赋值内部触发 render()整个绘制过程大致分四步。第一步ChartView 把数据交给 LineChartRendererrenderer 利用 AxisRange 做归一化把业务值域比如销售额 1000 ~ 5000映射到 view 的 bounds 坐标第二步renderer 拿着屏幕坐标点数组调用 PathSmoother生成曲线 UIBezierPath第三步ChartView 把 path 分别交给 lineLayer 和 areaMaskLayer前者画线后者配合 CAGradientLayer 做面积渐变第四步strokeEnd 动画从头到尾播一遍。这四条链路是串行的每一步的输出恰好是下一步的输入调试的时候可以在 PathSmoother 里打点看看 path 有没有异常。这里有一个容易忽略的细节 ChartView 里所有 layer 的 path 都使用 bounds 坐标系而不是 frame 坐标系一旦搞混图表整体偏移几乎是必然的后面避坑章会专门展开。3. 核心实现拆解Catmull-Rom 转三次贝塞尔与坐标映射链路3.1 平滑曲线算法控制点从哪来图表看起来「高级」还是「廉价」很大程度上取决于曲线平滑度。直接拿 UIBezierPath 的 addLine 把所有点连起来得到的是折线硬邦邦的设计稿肯定不认。这个项目的做法是 Catmull-Rom 样条转三次贝塞尔。核心思想是原始数据点作为样条通过点控制点由相邻点之间的连线方向计算出来这样曲线会像一条有弹性的橡皮筋一样经过每一个数据点又不会在拐点处生硬地折角。画出来的曲线比二次贝塞尔方案更圆润也不会有 overshoot 过冲问题。看代码/// 把一组数据点转为平滑曲线 path func smoothPath(with points: [CGPoint]) - UIBezierPath { let path UIBezierPath() guard points.count 1 else { return path } path.move(to: points[0]) for index in 1..points.count { // 前一个点、当前起点、当前终点、后一个点 // 首尾用 clamp 方式复用最近的有效点保证控制点不越界 let p0 points[max(0, index - 2)] let p1 points[index - 1] let p2 points[index] let p3 points[min(points.count - 1, index 1)] // Catmull-Rom 转 Bezier 的控制点公式1/6 是张力系数 let cp1 CGPoint(x: p1.x (p2.x - p0.x) / 6.0, y: p1.y (p2.y - p0.y) / 6.0) let cp2 CGPoint(x: p2.x - (p3.x - p1.x) / 6.0, y: p2.y - (p3.y - p1.y) / 6.0) path.addCurve(to: p2, controlPoint1: cp1, controlPoint2: cp2) } return path }这一段逻辑是整条曲线是否好看的命门。注意控制点 cp1 的 x 方向是 p2.x - p0.x也就是用「后一个点减前一个点」来求当前点切线方向而不是 p2.x - p1.x这样可以避免曲线只沿着线段方向走而没有弧度。1/6 这个张力系数越小曲线越贴近直线越大曲线越夸张。项目里默认 1/6实测在点数密集时曲线依旧稳定不容易出现波浪形抖动。3.2 坐标换算业务值域到屏幕坐标的映射数据进图表之前都是业务值比如「0.5 到 8.5」而屏幕坐标是像素。这个项目单独抽了一个 AxisRange 来管理值域换算代码也很好懂/// 把业务坐标点映射为屏幕坐标点 func plotPoint(_ value: ChartPoint, in bounds: CGRect, range: AxisRange) - CGPoint { // x 方向线性映射 let x bounds.minX (value.x - range.minX) / (range.maxX - range.minX) * bounds.width // y 方向先归一化再做翻转处理 let normalizedY (value.y - range.minY) / (range.maxY - range.minY) let y bounds.maxY - normalizedY * bounds.height return CGPoint(x: x, y: y) }参数说明range.minX/maxX 是 x 轴值域range.minY/maxY 是 y 轴值域bounds 是图表的绘图区域。x 方向是普通线性映射y 方向必须加一次翻转因为 UIKit 坐标系的原点在左上角y 轴向下增长而业务图表习惯 y 轴向上增长。如果不做 bounds.maxY - 这一步图表会上下颠倒值越大画得越低这个坑几乎所有人都会踩一次。实际使用中还需要对值域做 padding。比如 y 轴最大值如果和数据最大值完全相等曲线就会顶到视图边缘视觉上很难看。常规做法是给 range.maxY 放一个 10% 的余量我一般会在 renderer 里做一层包装计算出 minY 和 maxY 后各扩一点。3.3 面积图与渐变填充折线图只有一条线往往撑不起设计稿的质感项目里做了面积图支持而且填充的是渐变色。这里容易犯一个错误CAGradientLayer 本身没有 path 属性你不能直接把曲线 path 塞给一个渐变层然后让它只填充曲线下方区域。正确做法是用一个 CAShapeLayer 作为 gradientLayer 的 mask代码如下// 构造面积闭合路径从曲线终点连线到右下角、左下角、再回到起点 let areaPath UIBezierPath(cgPath: linePath.cgPath) areaPath.addLine(to: CGPoint(x: points.last!.x, y: bounds.maxY)) areaPath.addLine(to: CGPoint(x: points.first!.x, y: bounds.maxY)) areaPath.close() // 渐变层只负责颜色形状交给 mask 层 gradientLayer.frame bounds gradientLayer.colors [UIColor.systemBlue.withAlphaComponent(0.35).cgColor, UIColor.systemBlue.withAlphaComponent(0.05).cgColor] gradientLayer.mask areaMaskLayer areaMaskLayer.path areaPath.cgPath这段代码里的 areaMaskLayer 就是一个普通的 CAShapeLayer它的填充色无所谓真正起作用的是 path。gradientLayer 不加 path而是把整个 bounds 的渐变色铺满再让 mask 决定哪些区域可见。这样设计的好处是渐变方向和颜色可以随时调整而面积形状只由 mask 负责。有个细节需要注意areaPath 闭合时终点坐标 x 用 points.last 的 x而不是 bounds.maxX否则面积图会拖出一条水平尾巴到屏幕边缘数据量小时特别明显。3.4 strokeEnd 绘制动画与数据刷新图表最直观的体验就是入场动画。项目用的是 CAShapeLayer 的 strokeEnd 属性从 0 动画到 1配合 timingFunction 实现「一笔画」的效果。核心动画配置如下let animation CABasicAnimation(keyPath: strokeEnd) animation.fromValue 0 animation.toValue 1 animation.duration theme.animationDuration animation.timingFunction CAMediaTimingFunction(name: .easeOut) animation.fillMode .forwards animation.isRemovedOnCompletion false lineLayer.add(animation, forKey: lineDrawAnimation)参数说明strokeEnd 对闭合路径无效它只对未闭合的线段有视觉意义所以面积图的 mask 不能靠 strokeEnd 做动画项目里是给 areaMaskLayer 单独做了一个 opacity 动画配合。fillMode 用 .forwards 并且 isRemovedOnCompletion 设为 false是为了让动画结束后路径保持最终形态否则可能出现动画播完曲线突然消失的问题。数据动态刷新和入场动画有点冲突。如果每次 setData 都重新加 strokeEnd 动画用户会感觉图表一直在「重播」。通常做法是记录 hasRendered 状态只有首次渲染时播放动画后续 update 只更新 lineLayer.path不触发动画。3.5 触摸高亮与十字线的命中逻辑图表只有展示不够用户总想点某个点看具体数值。项目里 ChartTouchHandler 实现了简单的命中检测核心逻辑是遍历所有数据点找出离触摸位置最近的那个override func touchesBegan(_ touches: SetUITouch, with event: UIEvent?) { guard let touch touches.first, let renderer renderer else { return } let loc touch.location(in: self) // 在屏幕坐标上找距离触摸点最近的数据点 let nearest renderer.plotPoints.min { hypot($0.x - loc.x, $0.y - loc.y) hypot($1.x - loc.x, $1.y - loc.y) } guard let target nearest else { return } // 把屏幕坐标反算回业务值用于气泡展示 let value renderer.value(for: target) delegate?.chartView(self, didHighlight: value) }命中逻辑并不复杂但要注意两点。第一比较距离时要用屏幕坐标不能直接用业务值因为 x 和 y 的缩放比例通常不同第二找最近点的时间复杂度是 O(n)数据量超过 200 个点时建议改成按索引分段搜索或者提前把点按 x 排序不然触摸时会有可感知的卡顿。气泡提示层放在 ChartView 之上用原生的 UILabel 承载数值格式化的结果即可。4. 运行与集成把图表模块接进你的 Swift 工程4.1 接入方式与运行环境这套源码是纯 Swift 写的UI 部分基于 UIKit没有引入 CocoaPods 或 Carthage 之类的第三方依赖这对接入非常友好。我实际试了两种方式都能跑起来。第一种是直接把源码拖进自己的工程需要注意勾选 Copy items if needed并且确认 Targets 里勾选了你当前的 target。第二种是用 Swift Package Manager把文件夹路径拖进 Package 依赖列表。工程要求 iOS 13.0 以上Xcode 版本理论上 Swift 5 之后都能编译我用的 Xcode 14 没有任何问题。项目里的 Demo target 自带一个模拟数据源编译运行后能直接看到一个带渐变面积的平滑曲线图这是最快的验证方式。4.2 初始化并渲染一条折线接入的第一步是创建一个 ChartView 并给它赋值数据。这个项目的 View 使用方式和 UIKit 常规组件完全一致代码可以放在 viewDidLoad 里let chart ChartView(frame: CGRect(x: 16, y: 100, width: 340, height: 220)) chart.theme Theme.makeDefault() chart.dataPoints [ ChartPoint(x: 0, y: 12), ChartPoint(x: 1, y: 18), ChartPoint(x: 2, y: 9), ChartPoint(x: 3, y: 24), ChartPoint(x: 4, y: 20), ] view.addSubview(chart)dataPoints 是 [ChartPoint] 数组ChartPoint 的 x、y 都是 CGFloat。赋值之后 ChartView 的 didSet 方法会自动触发 render()不需要手动调用刷新方法。如果你想让图表自适应父视图宽度可以直接用 Auto Layout 约束注意要保证高度约束不为零否则 bounds 是零矩形render 计算出来的坐标全是 NaN。4.3 常用配置项说明Theme.swift 里集中管理图表的视觉参数改样式不需要动 View 代码。我把常用配置项整理成表方便你对照调整。配置项类型默认值说明lineColorUIColorsystemBlue折线颜色lineWidthCGFloat2.0折线宽度太细会显得单薄curveTensionCGFloat1/6张力系数控制曲线弯曲程度showAreaGradientBooltrue是否显示面积渐变showPointsBooltrue是否绘制数据点圆点animationDurationTimeInterval0.8入场动画时长axisColorUIColorsystemGray5网格线颜色numberOfYAxisLinesInt4y 轴网格线数量curveTension 是调样式时最常用的参数它直接传给 PathSmoother数值越小曲线越像折线。我习惯把数值调大 30% 对比一次看到曲线明显拱起时就能直观理解张力系数的意思。showPoints 打开时renderer 还会为每个数据点画一个小圆点内部实现是额外生成一个圆形的 UIBezierPath 填充到 pointLayer。4.4 动态更新数据图表在实际场景里不会只画一次接口数据几秒刷新一次是常态。项目支持直接覆盖 dataPoints 来更新内部会比对数据数量如果数量一致只更新 lineLayer 和 areaMaskLayer 的 path不加动画如果数量变了会重新走渲染管线。示例代码// 模拟定时器刷新数据 Timer.scheduledTimer(withTimeInterval: 3.0, repeats: true) { _ in let newPoints (0..20).map { index in ChartPoint(x: index, y: randomValue()) } chart.dataPoints newPoints }这里需要注意数据点数量变化时曲线动画不会重播但面积 mask 会瞬间填充。如果你希望在数据刷新时也有一段过渡效果可以在 render() 里对 areaMaskLayer 做一次淡入淡出动画项目源码里提供了一种可选实现。5. 避坑与排查贝塞尔图表绘制的六个翻车现场5.1 曲线上下颠倒整条超出容器现象数据值越大曲线反而越低甚至直接跑到视图外面。原因UIKit 的坐标原点在左上角y 轴向下增长。直接做归一化后乘以 bounds.height没有做翻转导致 y 方向反了。解决映射公式里必须用 bounds.maxY 减去归一化 y 乘以高度。确认代码里是let y bounds.maxY - normalizedY * bounds.height而不是normalizedY * bounds.height。顺手可以打印第一个点的屏幕坐标如果 y 显示为 bounds.maxY 附近说明翻转正确。5.2 点数密集时触摸滑动掉帧严重现象数据量到两三百个点手指滑动时图表区域的响应逻辑明显卡顿甚至滚动列表都受影响。原因触摸命中是用min遍历所有点做距离比较O(n) 的复杂度在密集数据下被放大而且每帧都触发 setNeedsDisplay 重绘。解决命中搜索改成按 x 索引二分查找先找触摸点最近的 index再在前后各取几个点比较距离同时渲染改成只更新 CAShapeLayer 的 path不要调用整个视图的 draw 方法。这个项目里的 ChartTouchHandler 只优化了索引二分后续二次开发可以继续加缓存。5.3 strokeEnd 动画播完曲线突然消失现象动画播放过程中曲线正常动画结束的一瞬间线条消失只剩数据点悬空。原因CABasicAnimation 默认在动画结束后会把 layer 属性恢复成动画之前的值相当于 strokeEnd 从 1 回退到初始状态。如果设置里没有填充模式就会出现「放完即消失」的现象。解决给动画设置fillMode .forwards并且isRemovedOnCompletion false。更好的做法是在动画代理回调里直接把 lineLayer.strokeEnd 设置为 1再把动画移除这样不会影响后续的 path 更新。5.4 图层坐标系错位曲线整体偏移现象曲线形状对但位置整体向右下方偏移或者只显示了一部分。原因CAShapeLayer 的 path 用的是 layer 的 bounds 坐标而 ChartView 在 initWithFrame 之后如果 frame 变了layer 的 bounds 也可能改变。如果 path 里的坐标用的是 view.bounds 但设置给了一个 bounds 不同的 layer就会出现系统性偏移。解决渲染前统一把绘图区域对齐到 layer.bounds或者干脆在 layoutSubviews 里重新生成 path。我这里强制约定所有 path 生成时只使用 boundsframe 只负责视图布局两者不混用。5.5 面积渐变完全不显示现象折线正常但曲线下方没有渐变色块。原因CAGradientLayer 没有 path 属性直接把贝塞尔曲线 path 赋值给 gradientLayer 是没有效果的必须通过 mask 来裁切。解决新建一个 CAShapeLayer把面积闭合路径设置给它的 path再把它赋给 gradientLayer.mask。另外记得给 gradientLayer 设置 framemask 的 path 坐标要跟 gradientLayer 的 bounds 一致。5.6 旋转屏幕后图表错位或面积 mask 残留现象横竖屏切换后曲线和图表的相对位置变了面积渐变停留在旧的位置。原因视图布局变化后bounds 更新但渲染代码没有重新执行而 layer 的 frame 被系统自动调整path 和 mask 就不匹配了。解决在 ChartView 的 layoutSubviews 里调用 render()并且先判断 bounds 是否变化避免每次 setNeedsLayout 都全量重绘。实测在列表 cell 里复用时这个坑尤其明显复用视图的 bounds 变了却不重绘经常导致图表显示错乱。6. 二次开发把固定折线图改造成可扩展的图表引擎6.1 用协议抽象渲染器项目的折线渲染实现得很扎实但你不可能永远只画折线。做二次开发时最值得先做的一件事是抽象渲染协议让 ChartView 不再强依赖 LineChartRenderer。我一般会加一个轻量协议protocol ChartRenderable: AnyObject { associatedtype DataModel func render(data: [DataModel], in bounds: CGRect) - UIBezierPath }下一步把 ChartView 的 renderer 类型从具体的 LineChartRenderer 改成任意遵守这个协议的类型数据模型不统一的问题可以用泛型或者类型擦除解决。这样折线图、柱状图、饼图各写各的 renderer互不污染图表组件就从「一个功能」长成了「一个小引擎」。6.2 加一种新图表柱状图渲染器实战协议抽象完实践一把。实现柱状图渲染器只需要把曲线 path 换成矩形 path复用坐标映射逻辑struct BarChartRenderer: ChartRenderable { func render(data: [ChartPoint], in bounds: CGRect) - UIBezierPath { let path UIBezierPath() let barWidth bounds.width / CGFloat(data.count) * 0.6 for point in data { let plot plotPoint(point, in: bounds) let rect CGRect(x: plot.x - barWidth / 2, y: plot.y, width: barWidth, height: bounds.maxY - plot.y) // 高度小于 1 的条视觉上是空至少给 1pt UIBezierPath(roundedRect: rect, cornerRadius: 2).append(path) } return path } }这里把 bars 的 path 直接 append 进同一个 UIBezierPath让 layer 只管理一个 path渲染性能更好。高度最小值 1pt 是一个真实场景的细节数据为 0 时矩形高度为 0用户看到的是那条基线会有「没数据」的错觉补齐视觉下限是更稳妥的做法。6.3 交互增强触摸点高亮与数据提示项目自带十字线高亮但二次开发里一般还要加一个数据气泡。思路是在 ChartView 上持有一个 UILabel触摸命中后把屏幕坐标转换到气泡 center注意气泡宽度会溢出屏幕边界要做一个 clamp 操作让气泡始终保持在视图内部。这套代码大约三十行核心还是项目里已有的 hitTest 逻辑。6.4 性能兜底只重绘变化区域图表数据频繁刷新后最容易被忽视的是性能。虽然 CAShapeLayer 更新 path 已经比 drawRect 快很多但数据量大了仍然会有浪费。我建议在 renderer 里算一个 incrementalIndex只更新最后几个变化的点对应的那一段曲线而不是每次全量重建 path。实现上可以将 path 拆成多个分段 UIBezierPath每段对应几个数据点刷新时只替换变更段。这个优化在实时监控类图表里效果尤其明显CPU 占用量能降一截。拆完这套源码再看图表开发最核心的门道还是坐标映射、曲线算法和图层结构。我自己后来接新图表需求时都会强制把 PathSmoother 在点数为 1、2、10、100 的 case 下各跑一遍确认曲线不会因为点太少而变形、也不会因为点太多而抖动再交给视图层。这个习惯帮我躲掉过很多次「看着没啥问题一上线就露出怪形状」的尴尬。希望帮到你。本文还有配套的精品资源点击获取