UIBezierPath贝塞尔曲线实例——静态指南针

引言


这里仅对UIBezierPath这一独立的类进行使用,不结合Core Animation中的类。

虚线绘制


在绘制完整实例前,先熟悉下setLineDash方法的使用。
直接上代码和呈现效果:

        let path = UIBezierPath.init()
        path.move(to: CGPoint.init(x: 30, y: 100))
        path.addLine(to: CGPoint.init(x: 600, y: 100))
        path.lineWidth = 5
        let LineDashArr: [CGFloat] = [20.0,40.0,40.0,80.0,60.0]
        path.setLineDash(LineDashArr, count: 5, phase: 0)
        UIColor.red.setStroke()
        path.stroke()
虚线绘制效果

向setLineDash方法传入的三个参数:
第一个参数:存放虚线各段长度的浮点数组。按照 划线--间隔--划线--间隔--... 设置,并且在最后一个浮点数表示的虚线部分绘制完毕后,回到第一个数进行循环,直到虚线绘制完成。
第二个参数:截取数组的个数。当此数小于数组实际个数时,相当于截取数组的前n个来使用,数组剩余元素完全无用。
第三个参数:偏移量,在此例中,如果设置偏移量为20,则第一段划线长度为40,第一个间隔为40,以此类推。

静态指南针


先看下最后完成的效果:


指南针

拆分来看,包含圆、三角形的绘制,是UIBezierPath的基本应用,唯一有一丢丢技巧的是刻度绘制,这就要用到前面虚线绘制的方法了。

罗盘轮廓

很简单,用init(ovalIn:)方法创建一个圆形,填充、描边。

        let radius = CGFloat(160)
        let originX = self.center.x
        let originY = self.center.y
        
        
        let path = UIBezierPath.init(ovalIn: CGRect.init(x: originX - radius, y: originY - radius, width: radius*2, height: radius*2))
        path.lineWidth = 5
        UIColor.black.setStroke()
        UIColor.white.setFill()
        path.stroke()
        path.fill()
罗盘轮廓

加一下罗盘上的文字,这部分代码就不展示了:


罗盘

指针

这里分为两部分绘制,蓝色部分和红色部分,每部分path添加两条线即可,且无需用close()闭合路径。只填充,不需描边。

        let blueHand = UIBezierPath.init()
        blueHand.lineWidth = 4
        blueHand.move(to: CGPoint.init(x: originX - 8, y: originY))
        blueHand.addLine(to: CGPoint.init(x: originX, y: originY - 120))
        blueHand.addLine(to: CGPoint.init(x: originX + 8, y: originY))
        UIColor.blue.setFill()
        blueHand.fill()

        let redHand = UIBezierPath.init()
        redHand.lineWidth = 4
        redHand.move(to: CGPoint.init(x: originX - 8, y: originY))
        redHand.addLine(to: CGPoint.init(x: originX, y: originY + 120))
        redHand.addLine(to: CGPoint.init(x: originX + 8, y: originY))
        UIColor.red.setFill()
        redHand.fill()
指针

罗盘刻度

通过观察发现,罗盘刻度分为两类,一类是四个字母对应的大刻度,一类是密集的小刻度,对于每类刻度,刻度间间隔相同,刻度粗细也相同,可以通过将圆形路径绘制为虚线的方法分别绘制,这里要注意把虚线间间隔算准了。
圆的0点参照官方文档中的图:


来自官方文档

大刻度绘制:

        let scaleRadius = CGFloat(150)
        let scale = UIBezierPath.init(ovalIn: CGRect.init(x: originX - scaleRadius, y: originY - scaleRadius, width: scaleRadius*2, height: scaleRadius*2))
        scale.lineWidth = 20
        let LineDashArr: [CGFloat] = [4.0,scaleRadius*CGFloat(Double.pi*0.5) - 4]
        scale.setLineDash(LineDashArr, count: 2, phase: 2)
        UIColor.black.setStroke()
        scale.stroke()

我设置的刻度宽度为4,为保证每条刻度线位于正中位置,故偏移量为2,间隔为 1/4圆周-刻度宽度的一半*2 , 即 R * π * 0.5 - 刻度宽度。


罗盘刻度

小刻度同理:

        let milliScaleR = CGFloat(155)
        let milliScale = UIBezierPath.init(ovalIn: CGRect.init(x: originX - milliScaleR, y: originY - milliScaleR, width: milliScaleR*2, height: milliScaleR*2))
        milliScale.lineWidth = 10
        let mLineDashArr: [CGFloat] = [2.0,scaleRadius*CGFloat(Double.pi/80)-0.1 - 2]
        milliScale.setLineDash(mLineDashArr, count: 2, phase: 1)
        UIColor.black.setStroke()
        milliScale.stroke()

小刻度

完整Demo:https://github.com/XG-nil/UIBezierPathDemo

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

推荐阅读更多精彩内容