什么是贝塞尔曲线
贝塞尔曲线,又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线。
通过控制曲线上的四个点(起始点、终止点以及两个相互分离的中间点)来创造、编辑图形。其中起重要作用的是位于曲线中央的控制线。这条线是虚拟的,中间与贝塞尔曲线交叉,两端是控制端点。移动两端的端点时贝塞尔曲线改变曲线的曲率(弯曲的程度);移动中间点(也就是移动虚拟的控制线)时,贝塞尔曲线在起始点和终止点锁定的情况下做均匀移动。
以上是百科上面的一些介绍,大部分人看完一头雾水。那么到底什么是贝塞尔曲线呢?简单的说贝塞尔曲线通过控制曲线上的起始点、终止点以及中间的控制点来生成曲线的路径。贝塞尔曲线又分为一阶曲线、二阶曲线、三阶曲线和高阶曲线。
下面我们用几张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的控制点并非曲线顶点,可参考上面动图展示
本文首发于公众号【一个老码农】
原文地址