iOS中的贝塞尔曲线(UIBezierPath)

什么是贝塞尔曲线

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

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

  • 一阶曲线
11881598-734eadceff6b2a68.gif

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

  • 二阶曲线:
11881598-92ac3d7a404c861a.gif

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

  • 三阶曲线:
11881598-288045a8a4ffce96.gif
  • 高阶曲线:
11881598-07325ed4befad648.gif

说明:gif动图来源于网络

贝塞尔曲线在iOS中的应用

贝塞尔曲线在iOS中有一个对应的类,叫做UIBezierPathUIBezierPathCore Graphics框架关于路径的封装,我们可以根据它,画出直线、椭圆、圆、曲线等各种形状。
UIBezierPath通常与CAShapeLayer配合使用。CAShapeLayer继承自CALayer,它拥有CALayer的所有属性。UIBezierPathCAShapeLayer提供路径, 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闭合,形成一个三角形

效果图:

image

画圆:

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)

效果图:

image
  • 二阶曲线:

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

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)

效果图:

image
  • 三阶曲线:
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)

效果图:

image
  • 高阶曲线:

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)

效果图:

image

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

本文首发于公众号【一个老码农】

原文地址

你可能感兴趣的:(iOS中的贝塞尔曲线(UIBezierPath))