快速上手IOS UIBezierPath(贝塞尔曲线)

时间:2021-05-02

uibezierpath主要用来绘制矢量图形,它是基于core graphics对cgpathref数据类型和path绘图属性的一个封装,所以是需要图形上下文的(cgcontextref),所以一般uibezierpath在drawrect中使用。

使用方法

uibezierpath 是对 cgpathref 的封装。创建矢量图形时,拆解成一或多条线段,拼接起来,每条线段的终点都是下一条线段的起点。

具体地:

1.创建一个 uibezierpath 对象

2.用 movetopoint: 设置初始线段的起点

3.添加线段,定义一或多个子路径

4.修改 uibezierpath 的绘图相关的属性,比如stroke path的属性 linewidth 和 linejoinstyle ,filled path的属性 usesevenoddfillrule

注意:如果是矩形或者圆之类的特殊图形,可以不用第2步。

代码案例

画直线

? 1 2 3 4 5 6 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(50, 50)]; [path addlinetopoint:cgpointmake(100, 50)]; path.linewidth = 5.0f; path.linejoinstyle = kcglinejoinround; [path stroke];

创建三角形

? 1 2 3 4 5 6 7 8 9 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(50, 50)]; [path addlinetopoint:cgpointmake(300, 50)]; [path addlinetopoint:cgpointmake(200, 150)]; // 最后的闭合线是可以通过调用closepath方法来自动生成的,也可以调用-addlinetopoint:方法来添加 // [path addlinetopoint:cgpointmake(50, 50)]; [path closepath]; path.linewidth = 5.0f; [path stroke];

创建矩形

? 1 2 3 uibezierpath *path = [uibezierpath bezierpathwithrect:cgrectmake(50, 100, 50, 50)]; path.linewidth = 5.0f; [path stroke];

创建内切曲线

? 1 2 3 uibezierpath *path = [uibezierpath bezierpathwithovalinrect:cgrectmake(50, 200, 50, 50)]; path.linewidth = 5.0f; [path stroke];

? 1 2 3 uibezierpath *path = [uibezierpath bezierpathwithovalinrect:cgrectmake(50, 200, 50, 100)]; path.linewidth = 5.0f; [path stroke];

创建带有圆角的矩形,当矩形变成正圆的时候,radius就不再起作用

? 1 2 3 uibezierpath *path = [uibezierpath bezierpathwithroundedrect:cgrectmake(50, 300, 50, 50) cornerradius:15.0f]; path.linewidth = 5.0f; [path stroke];

设定特定的角为圆角的矩形

? 1 2 3 uibezierpath *path = [uibezierpath bezierpathwithroundedrect:cgrectmake(50, 400, 50, 50) byroundingcorners:uirectcornerbottomleft cornerradii:cgsizemake(5,5)]; path.linewidth = 5.0f; [path stroke];

创建圆弧

? 1 2 3 uibezierpath *path = [uibezierpath bezierpathwitharccenter:cgpointmake(100, 550) radius:25 startangle:0 endangle:1.5*m_pi clockwise:yes]; path.linewidth = 5.0f; [path stroke];

通过路径a创建路径b

? 1 2 3 4 5 6 uibezierpath *path_a = [uibezierpath bezierpath]; [path_a movetopoint:cgpointmake(200, 50)]; [path_a addlinetopoint:cgpointmake(250, 100)]; path_a.linewidth = 5.0f; uibezierpath *path_b = [uibezierpath bezierpathwithcgpath:path_a.cgpath]; [path_b stroke];

创建三次贝塞尔曲线

? 1 2 3 4 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(100, 200)]; [path addcurvetopoint:cgpointmake(300, 200) controlpoint1:cgpointmake(150, 150) controlpoint2:cgpointmake(250, 250)]; [path stroke];

创建二次贝塞尔曲线

? 1 2 3 4 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(100, 200)]; [path addquadcurvetopoint:cgpointmake(300, 200) controlpoint:cgpointmake(150, 150)]; [path stroke];

添加圆弧

? 1 2 3 4 5 6 7 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(200, 400)]; [path addlinetopoint:cgpointmake(225, 410)]; [path addarcwithcenter:cgpointmake(200, 400) radius:25 startangle:0 endangle:1.5*m_pi clockwise:yes]; // [path closepath]; // [path removeallpoints]; [path stroke];

追加路径

? 1 2 3 4 5 6 7 8 uibezierpath *path_a = [uibezierpath bezierpath]; [path_a movetopoint:cgpointmake(200, 500)]; [path_a addlinetopoint:cgpointmake(225, 410)]; uibezierpath *path_b = [uibezierpath bezierpath]; [path_b movetopoint:cgpointmake(200, 600)]; [path_b addlinetopoint:cgpointmake(225, 500)]; [path_a appendpath:path_b]; [path_a stroke];

创建翻转路径,即起点变成终点,终点变成起点

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(50, 50)]; [path addlinetopoint:cgpointmake(100, 50)]; path.linewidth = 5.0f; nslog(@"%@",nsstringfromcgpoint(path.currentpoint)); uibezierpath *path_b = [path bezierpathbyreversingpath]; cgaffinetransform transform = cgaffinetransformmaketranslation(200, 0); [path_b applytransform: transform]; // 两条路径分别添加一条直接到 self.center [path addlinetopoint: cgpointmake(self.frame.size.width*0.5, self.frame.size.height*0.5)]; [path_b addlinetopoint: cgpointmake(self.frame.size.width*0.5, self.frame.size.height*0.5)]; nslog(@"%@",nsstringfromcgpoint(path_b.currentpoint)); [[uicolor redcolor] set]; [path stroke]; [[uicolor bluecolor] set]; [path_b stroke];

路径进行仿射变换

? 1 2 3 4 5 6 7 uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(100, 50)]; [path addlinetopoint:cgpointmake(200, 50)]; cgaffinetransform transform = cgaffinetransformrotate(self.transform, m_pi_4); [path applytransform:transform]; path.linewidth = 5.0f; [path stroke];

创建虚线

? 1 2 3 4 5 6 cgfloat dashstyle[] = {1.0f, 2.0f}; uibezierpath *path = [uibezierpath bezierpath]; [path movetopoint:cgpointmake(50, 50)]; [path addlinetopoint:cgpointmake(100, 50)]; [path setlinedash:dashstyle count:2 phase:0.0]; [path stroke];

设置颜色

? 1 2 3 4 5 uibezierpath *path = [uibezierpath bezierpathwithovalinrect:cgrectmake(100, 100, 100, 100)]; [[uicolor greencolor] setstroke]; [[uicolor redcolor] setfill]; [path stroke]; [path fill];

设置描边混合模式

? 1 2 3 4 5 uibezierpath *path = [uibezierpath bezierpathwithovalinrect:cgrectmake(100, 100, 100, 100)]; [[uicolor greencolor] setstroke]; path.linewidth = 10.0f; [path strokewithblendmode:kcgblendmodesaturation alpha:1.0]; [path stroke];

? 1 2 3 4 uibezierpath *path = [uibezierpath bezierpathwithovalinrect:cgrectmake(100, 100, 100, 100)]; [[uicolor redcolor] setfill]; [path fillwithblendmode:kcgblendmodesaturation alpha:0.6]; [path fill];

修改当前图形上下文的绘图区域可见,随后的绘图操作导致呈现内容只有发生在指定路径的填充区域

? 1 2 3 4 uibezierpath *path = [uibezierpath bezierpathwithovalinrect:cgrectmake(100, 100, 100, 100)]; [[uicolor greencolor] setstroke]; [path addclip]; [path stroke];

结语

关于uibezierpath的简单介绍就到这了,主要是用代码做了展示,属性跟方法,没详细去介绍,我觉得可以直接看苹果的api写的也蛮清楚的.或者自己试试不同的参数样式也能大概理解了.

核心动画跟贝赛尔曲线都有了简单的介绍了,接下来就可以动手做点简单的自定义动画了.

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持服务器之家!

原文链接:http://www.cnblogs.com/dongliu/p/6564219.html

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章