什么是贝塞尔曲线

贝塞尔曲线，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线。通过控制曲线上的四个点（起始点、终止点以及两个相互分离的中间点）来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的，中间与贝塞尔曲线交叉，两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率（弯曲的程度）；移动中间点（也就是移动虚拟的控制线）时，贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。

以上是百科上面的一些介绍，大部分人看完一头雾水。那么到底什么是贝塞尔曲线呢？简单的说贝塞尔曲线通过控制曲线上的起始点、终止点以及中间的控制点来生成曲线的路径。贝塞尔曲线又分为一阶曲线、二阶曲线、三阶曲线和高阶曲线。下面我们用几张gif图来行进一步说明：

一阶曲线：

一阶曲线本质是一个线段，只有起始点和终止点两个点组成。

二阶曲线：

二阶曲线，二阶曲线由三个点组成，即首尾两个点加一个控制点，二阶曲线其实是一条抛物线。

三阶曲线：

高阶曲线：

说明：gif动图来源于网络

贝塞尔曲线在iOS中的应用

贝塞尔曲线在iOS中有一个对应的类，叫做UIBezierPath，UIBezierPath是Core Graphics框架关于路径的封装，我们可以根据它，画出直线、椭圆、圆、曲线等各种形状。 UIBezierPath通常与CAShapeLayer配合使用。CAShapeLayer继承自CALayer，它拥有CALayer的所有属性。UIBezierPath为CAShapeLayer提供路径， CAShapeLayer在提供的路径中进行渲染，绘制出图形。

一阶曲线：

我们用一阶曲线画一个三角形：

let path = UIBezierPath()
//三角形顶点1
path.move(to: CGPoint(x: 100, y: 100))
//三角形顶点2
path.addLine(to: CGPoint(x: view.frame.width - 40, y: 100))
//三角形顶点3
path.addLine(to: CGPoint(x: 100, y: 200))
//path闭合
path.close()
//线宽
path.lineWidth = 2
let shape = CAShapeLayer()
//边线颜色
shape.strokeColor = UIColor.blue.cgColor
//填充色
shape.fillColor = UIColor.white.cgColor
shape.path = path.cgPath
view.layer.addSublayer(shape)

设置三角形顶点，然后把path闭合，形成一个三角形

效果图：

画圆：

let path = UIBezierPath(ovalIn: CGRect(x: 100, y: 100, width: 100, height: 100))
let shape = CAShapeLayer()
//边线颜色
shape.strokeColor = UIColor.blue.cgColor
//填充色
shape.fillColor = UIColor.white.cgColor
shape.path = path.cgPath
view.layer.addSublayer(shape)

效果图：

二阶曲线：

利用二阶曲线，画一个抛物线

let path = UIBezierPath()
path.lineCapStyle = .round
path.lineJoinStyle = .round
path.move(to: CGPoint(x: 100, y: 200))
//第一个参数point为path终点坐标，第二个point参数为切点坐标
path.addQuadCurve(to: CGPoint(x: 300, y: 200), controlPoint: CGPoint(x: 300, y: 100))
let shape = CAShapeLayer()
//边线颜色
shape.strokeColor = UIColor.blue.cgColor
//填充色
shape.fillColor = UIColor.white.cgColor
shape.path = path.cgPath
view.layer.addSublayer(shape)

效果图：

三阶曲线：

let path = UIBezierPath()
path.lineCapStyle = .round
path.lineJoinStyle = .round
path.move(to: CGPoint(x: 100, y: 200))
//第一个参数point为path终点坐标，第二个和第三个point参数为控制点坐标
path.addCurve(to: CGPoint(x: view.frame.width - 20, y: 200), controlPoint1: CGPoint(x: 200, y: 100), controlPoint2: CGPoint(x: 300, y: 300))
let shape = CAShapeLayer()
 //边线颜色
shape.strokeColor = UIColor.blue.cgColor
//填充色
shape.fillColor = UIColor.white.cgColor
shape.path = path.cgPath
view.layer.addSublayer(shape)

效果图：

高阶曲线：

UIBezierPath最多提供了三阶曲线，如果我们想实现高阶曲线怎么办呢，这个时候我们可以多次设置path的起点以及控制点，如下代码：

let path = UIBezierPath()
path.lineCapStyle = .round
path.lineJoinStyle = .miter
path.move(to: CGPoint(x: 10, y: 200))
//第一个参数point为path终点坐标，第二个和第三个point参数为控制点坐标
path.addCurve(to: CGPoint(x: 200, y: 200), controlPoint1: CGPoint(x: 100, y: 100), controlPoint2: CGPoint(x: 200, y: 300))
//第二次设置起始点及控制点
path.move(to: CGPoint(x: 200, y: 200))
path.addCurve(to: CGPoint(x: view.frame.width - 20, y: 300), controlPoint1: CGPoint(x: 200, y: 100), controlPoint2: CGPoint(x: 400, y: 200))
        
let shape = CAShapeLayer()
//边线颜色
shape.strokeColor = UIColor.blue.cgColor
//填充色
shape.fillColor = UIColor.white.cgColor
shape.path = path.cgPath
view.layer.addSublayer(shape)

效果图：

注：UIBezierPath的控制点并非曲线顶点，可参考上面动图展示

关注公众号【一个老码农】免费获取iOS开发进阶学习视频

原文地址

iOS中的贝塞尔曲线(UIBezierPath)

什么是贝塞尔曲线

贝塞尔曲线在iOS中的应用