ios制作一个速度表盘

我们首先看一下这个速度表盘的效果:

1256700-59d6722b0bcd874f

速度表盘

为了实现上述的效果,我们首当其冲的是得了解的是贝塞尔曲线,听上去好高大上的样子,接下来我先就我了解贝塞尔曲线的知识给未接触的朋友普及一下。

Bézier curve(贝塞尔曲线)是应用于二维图形应用程序的数学曲线.主要有起始点、终止点(也称锚点)、控制点这几个概念。通过调整控制点,贝塞尔曲线的形状会发生变化。

大家先欣赏一下各种贝塞尔曲线

一阶

二阶

三阶

高阶

  • 我们要完成上述表盘的效果,需要用到的就是贝塞尔曲线!
    我们看一下苹果官方文档对它的介绍

    The UIBezierPath class lets you define a path consisting of straight and curved line segments and render that path in your custom views. You use this class initially to specify just the geometry for your path. Paths can define simple shapes such as rectangles, ovals, and arcs or they can define complex polygons that incorporate a mixture of straight and curved line segments. After defining the shape, you can use additional methods of this class to render the path in the current drawing context.

上述文字简单翻译一下的意思是:你可以使用贝塞尔曲线来定义直线和曲线和自定义的图形。官方还有很长的篇幅来解释它,有兴趣的可以去看。
下面我主要介绍UIBezierPathCAShapeLayer一起使用,完成上述表盘的效果,我默认你已经经过查找资料对他们很熟悉。

首先我们分解步骤

  • 1.画出内侧的圆弧

    11

苹果官方提供了3阶以下的api接口,我使用一个二阶的api,实现圆弧。

弧线的参考系:

22

coordinate system
  • 2.画出外侧的刻度

33

  • 3.增加刻度值
44

需要使用创建label的方式,首先我们得计算出label的position,然后添加

  • 4.实现速度显示(实现方式很多,可以是Label,也可以画出来,就不赘述)

这里说一下画的方式

  • 5.实现进度

    我们只需要改变strokeEnd即可实现速度变化,默认0~1之间。

我们可以在外部通过定时器方法模拟速度表盘的变化,即可实现上述速度表盘。

结尾:本文只是简单的介绍一种思路,个人感觉可以优化的空间很多,打算整理写一个上传gitHub的三方库,提供多个可供外界改变的接口,希望有兴趣的朋友一起来做,维护这个库,欢迎私信联系。

1 8 收藏 1 评论

可能感兴趣的话题



直接登录
最新评论
  • 酉衎   01/23

    你好,如果我想在上面添加一根指针,通过点击刻度调整指针的位置,该怎么做呢?

跳到底部
返回顶部