UIBezierPath贝塞尔曲线详解(swift)

参考:Developer Documentation > UIBezierPath

UIBezierPath简介


UIBezierPath类位于UIKit中,本质上是一种矢量路径(path),它允许在视图中绘制直线或者曲线,以及各种不规则图形。

UIBezierPath类


  • 初始化

init(rect: CGRect) 

用矩形路径初始化一个UIBezierPath对象

init(ovalIn rect: CGRect)

用椭圆形路径初始化一个UIBezierPath对象

init(roundedRect: CGRect, cornerRadius: CGFloat)

用圆角矩形路径初始化一个UIBezierPath对象
roundedRect:矩形的frame
cornerRadius:矩形的圆角半径

init(roundedRect: CGRect, byRoundingCorners: UIRectCorner, cornerRadii: CGSize)

用圆角矩形路径初始化一个UIBezierPath对象,并可指明矩形哪个角变为圆角。
UIRectCorner:枚举类型,指定矩形圆角

init(arcCenter: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)

用圆弧路径初始化一个UIBezierPath对象。
arcCenter: 圆心
radius:半径
startAngle:起点角度
endAngle:终点角度
clockwise:绘制方向是否为顺时针;bool类型,true为顺时针,false为逆时针。


图1 绘制参考

绘制完毕后,currentPoint即为绘制终点的point

init(cgPath: CGPath)

通过CGPath初始化一个UIBezierPath对象

reversing() -> UIBezierPath

反向绘制路径,与原路径绘制出来的图形一样,只是起点和终点相反,currentPoint为原来的起点

  • 构建路径

move(to point: CGPoint)

将currentPoint移动到指定的点

addLine(to point: CGPoint)

在当前路径中追加一条直线段
point:线段终点

addArc(withCenter center: CGPoint, radius: CGFloat, startAngle: CGFloat, endAngle: CGFloat, clockwise: Bool)

在当前路径中追加一条圆弧

addCurve(to endPoint: CGPoint, controlPoint1: CGPoint, controlPoint2: CGPoint)

在当前路径中追加一条三阶贝塞尔曲线(关于n阶贝塞尔曲线可以参考这位大佬的贝塞尔曲线扫盲
endPoint:终点
controlPoint1:控制点1
controlPoint2:控制点2
三阶贝塞尔曲线有两个控制点(n阶有n-1个)

图2 三阶贝塞尔曲线

addQuadCurve(to endPoint: CGPoint, controlPoint: CGPoint)

在当前路径中追加一条二阶贝塞尔曲线
endPoint:终点
controlPoint:控制点


图3 二阶贝塞尔曲线
close()

关闭当前子路径,连接currentPoint和子路径的起点

removeAllPoints()

移除所有的点,删除所有子路径。

append(_ bezierPath: UIBezierPath)

将指定path追加到当前UIBezierPath对象中

var cgPath: CGPath { get set }

给定时间点的路径快照

var currentPoint: CGPoint { get }

路径上当前的点,路径为空时,其值是CGPointZero

  • 绘图属性

var lineWidth: CGFloat { get set }

路径的线宽,宽度为0代表设备可以呈现的最细的线,实际呈现的线宽可能与指定宽度相差最多2个像素。默认线宽1.0

var lineCapStyle: CGLineCap { get set }

路径终点样式(例:设为.round时终点为圆角样式)
CGLineCap:枚举类型

var lineJoinStyle: CGLineJoin { get set }

拐点样式


图4 从左到右依次为.miter .round .bevel
miterLimit: CGFloat { get set }

斜接限制,即线段内外层夹角距离与线段厚度的比值限制

图5 黄色标识即为内外夹角距离

当前斜接比值(暂且这么叫吧....) = 内外夹角距离 / 线段厚度

可以看出,右边的角较锋锐,斜接比值较大,而miterLimit的作用即是避免角度尖刺。
设置右边角miterLimit = 3,显示结果如下:


图6 类似设置lineJoinStyle为.bevel

默认斜接限制为10

flatness: CGFloat { get set }

渲染精度。
值越小,绘制出的曲线越平滑,相应的绘制时间越久。值较大时,会产生锯齿状曲线,但绘制时间较短。
大多数情况下,我们不应修改这个值,但可以在屏幕滚动等特殊情况下,暂时增大该值,以减少临时绘制形状需要的时间。

usesEvenOddFillRule: Bool { get set }

是否使用奇偶填充规则,设置true为奇偶填充规则,false为非零环绕数填充规则。
规则解释:
对于形状内任何一点,从该点向任一方向做一射线——

图7 参考自www.cs.rit.edu/~icss571/filling/alt_parity.html

奇偶规则:
若射线与形状交点数为奇数,则被认为在路径内部,需要被填充,偶数,则被认为在路径外,不填充。上图P点与形状有三个交点,需要被填充。
非零环绕数规则:
初始环绕数为0,对于每个交点,路径从左向右穿过射线时,环绕数+1,从右向左穿过,环绕数-1,环绕数不为零即填充。上图P点环绕数 = -1+1+1=1。注意,这里的“左”“右”是可以人为规定的,如下图,既可规定上部为左,也可规定下部为左,两种规定下,环绕数为倒数。
意即,只要由左向右穿过的路径数≠由右向左穿过的路径数,环绕点一定不为零。

图8 图片来自https://blog.csdn.net/wodownload2/article/details/52151714

setLineDash(_ pattern: UnsafePointer<CGFloat>?, count: Int, phase: CGFloat)

虚线绘制。关于此方法,会在下一篇文章实例中用到。

getLineDash(_ pattern: UnsafeMutablePointer<CGFloat>?, count: UnsafeMutablePointer<Int>?, phase: UnsafeMutablePointer<CGFloat>?)

重新获取线条绘制模型
参数中的数组必须足够大,以容纳模型中的所有返回值。如果不确定有多少值,可以调用这个方法两次。第一次调用时,不要为pattern传递值,而是使用count参数中的返回值来创建一个浮点数数组,然后可以在第二次传递这些浮点数。

  • 绘制路径

fill()

基于当前绘图属性绘制路径的闭合区域,此方法将在绘制之前隐式关闭未闭合的子路径。
该方法在绘制之前自动保存当前图形状态,并在绘制完成后恢复该状态,因此不必手动保存图形状态。

fill(with blendMode: CGBlendMode, alpha: CGFloat)

指定混合模式和透明度进行填充
blendMode:决定新填充内容和已存在内容的混合方式。关于CGBlendMode枚举类型参考苹果官方文档关于CGBlendMode的介绍

stroke()

绘制路径,该方法在绘制之前自动保存当前图形状态,并在绘制完成后恢复该状态,因此不必手动保存图形状态。

stroke(with blendMode: CGBlendMode, alpha: CGFloat)

使用指定的混合模式和透明度绘制路径,该方法在绘制之前自动保存当前图形状态,并在绘制完成后恢复该状态,因此不必手动保存图形状态。
stroke() 和 fill()的区别:
上文图5中两图形均是由stroke()绘制的折线,并且将线条颜色设置为red,现将左边折线路径填充色设置为yellow,并用fill()绘制,结果如下。

图9 fill()绘制图形,自动闭合path

这里贴下两条路径的代码:

override func draw(_ rect: CGRect) {
        
        let path = UIBezierPath.init()
        path.move(to: CGPoint.init(x: 150, y: 150))
        path.addLine(to: CGPoint.init(x: 200, y: 200))
        path.addLine(to: CGPoint.init(x: 150, y: 250))
        path.lineWidth = 20
        UIColor.red.setStroke() 
        UIColor.yellow.setFill()
        path.fill()

        let path2 = UIBezierPath.init()
        path2.move(to: CGPoint.init(x: 350, y: 150))
        path2.addLine(to: CGPoint.init(x: 450, y: 170))
        path2.addLine(to: CGPoint.init(x: 350, y: 190))
        path2.lineWidth = 20
        path2.stroke()
    }

设置填充色及描边色的方法是包含在UIColor中的,UIBezierPath类并不含有此方法。

  • 剪切路径

addClip()

该方法修改了当前的可视绘图区域。调用之后,后续的绘图操作只会在指定路径的填充区域内呈现内容。

  • 碰撞检测

contains(_ point: CGPoint) -> Bool

是否包含某个点

isEmpty: Bool { get }

路径是否为空

bounds: CGRect { get }

路径的bounds。该属性的值表示完全覆盖路径中所有点的最小矩形,包括贝塞尔曲线的控制点。

  • 路径变换

apply(_ transform: CGAffineTransform)

根据仿射变换矩阵变换路径。
transform:要应用到路径的矩阵。
关于仿射变换的数学原理可参考这份PPT

结合官方文档补充UIBezierPath的一些知识


关于currentPoint

创建空UIBezierPath对象时,currentPoint是未定义的,需要手动设置,在不绘制线段的情况下移动currentPoint,可以用move(To:)方法,所有其他方法都会在路径中添加一条直线或曲线段。添加新的直线段或曲线段的方法总是从currentPoint开始,到指定的新点结束。添加后,新段的端点自动成为currentPoint。

关于子路径

一个UIBezierPath对象可以包含任意数量的开放或封闭子路径,其中每个子路径表示一系列相连的路径段。调用close()方法会将当前路径第一个点和currentPoint连接起来来闭合当前路径。调用move(to:)方法来设置下一个子路径的起点(若此前未调用close()方法则不会闭合前一个路径)。UIBezierPath对象中所有子路径共享相同的绘图属性并且作为一个整体被控制,要使不同路径具有不同属性,则需为其创建新的UIBezierPath对象。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容