ios製作乙個速度表盤

我們首先看一下這個速度表盤的效果：

速度表盤

為了實現上述的效果，我們首當其衝的是得了解的是貝塞爾曲線，聽上去好高大上的樣子，接下來我先就我了解貝塞爾曲線的知識給未接觸的朋友普及一下。

bézier curve(貝塞爾曲線)是應用於二維圖形應用程式的數學曲線.主要有起始點、終止點（也稱錨點）、控制點這幾個概念。通過調整控制點，貝塞爾曲線的形狀會發生變化。

一階

二階三階高階

上述文字簡單翻譯一下的意思是：你可以使用貝塞爾曲線來定義直線和曲線和自定義的圖形。官方還有很長的篇幅來解釋它，有興趣的可以去看。

下面我主要介紹uibezierpath和cashapelayer一起使用，完成上述表盤的效果，我預設你已經經過查詢資料對他們很熟悉。

首先我們分解步驟

蘋果官方提供了3階以下的api介面，我使用乙個二階的api,實現圓弧。

//主要解釋一下各個引數的意思

//center 中心點（可以理解為圓心）
//radius 半徑
//startangle 起始角度
//endangle 結束角度
//clockwise 是否順時針
//我們需要計算出每段弧線的起始角度和結束角度
//這裡我們從- m_pi 開始，我們需要理解與明白的是我們畫的弧線與內側弧線是同乙個圓心
需要使用建立label的方式，首先我們得計算出label的position,然後新增
cgpoint point      = [self calculatetextpositonwitharccenter:centers angle:textangel];

nsstring *ticktext = [nsstring stringwithformat:@"%d",i * 2];
//預設label的大小14 * 14
uilabel *text = [[uilabel alloc] initwithframe:cgrectmake(point.x - 5, point.y - 5, 14, 14)];
text.text = ticktext;
text.font = font;
text.textcolor = [uicolor colorwithred:0.54 green:0.78 blue:0.91 alpha:1.0];
text.textalignment = nstextalignmentcenter;
[self addsubview:text];
//預設計算半徑135
- (cgpoint)calculatetextpositonwitharccenter:(cgpoint)center
angle:(cgfloat)angel
這裡說一下畫的方式

- (void)drawrect:(cgrect)rect

//提供乙個外部的介面，通過重寫setter方法來改變進度

- (void)setspeed:(double)speed
我們可以在外部通過定時器方法模擬速度表盤的變化，即可實現上述速度表盤。
 
如何用HTML技術製作乙個簡單的數字表盤
這就是表盤的真面目，如果要直接在要新增的位置加入數字表盤的話，要先在新增的位置寫 class style panel id demo panel class style digit 0li 1li 2li 3li 4li 5li 6li 7li 8li 9li 0li ul div class st...
iOS開發乙個製作Live Photo的工具
位址如下 1.livephoto簡介 2.livephoto的本質 3.涉及到的技術 4.實現livephoto製作工具 param currenttime 某一時刻單位 s return return 返回image uiimage getvideoimagewithtime float64 cu...
自定義乙個儀錶盤View
背景色變化很醜，請忽略哈。主要是演示一下效果哈哈哈！首先看到這個效果。分析一下有哪些組成部分 話不多說開擼，先定個小目標，繼承個view類再說 public class ybbview extends view public ybbview context context,nullable attr...