話不多說，我們先上效果圖

交流電圖

直流電圖

????????由于drawReact方法過于消耗內(nèi)存，此處我們選擇用shaperlayer來繪畫。

? ? ? ? 首先我們確定繪畫范圍，然后在上面創(chuàng)建一個(gè)shaperlayer對(duì)象。已知我們當(dāng)前的繪畫寬度范圍是600，我計(jì)劃在上面繪畫60個(gè)點(diǎn)，每個(gè)點(diǎn)之間距離是10個(gè)屏幕點(diǎn)，每當(dāng)?shù)絹硇碌臄?shù)據(jù)就抹去數(shù)組數(shù)據(jù)第一個(gè)元素。

? ? ? ? 直流電繪畫：

????????對(duì)于直流電的繪畫時(shí)間很容易的事，我們?cè)诶L畫的時(shí)候，兩點(diǎn)之間進(jìn)行對(duì)比，如果大小一樣，x軸加到10個(gè)距離點(diǎn)，并繪畫。如果是不相等，在上一個(gè)點(diǎn)的x軸位置繪畫銜接點(diǎn)，并在上一個(gè)點(diǎn)的x軸位置加大10個(gè)屏幕點(diǎn)繪畫當(dāng)前點(diǎn)，點(diǎn)準(zhǔn)備好了之后，就可以用貝塞爾畫線了。代碼如下

直流電繪畫

????????解決重繪問題：

? ????? 圖繪好之后，現(xiàn)在就要解決重繪問題，由于shaper沒有重繪的方法（不同于drawreact），因此我們就在下次繪畫的時(shí)候刪除當(dāng)前繪畫的layer，然后新建一個(gè)layer繪畫。

? ? ? ? 交流電的繪畫：

? ? ? ? 我先簡單介紹下我們的數(shù)據(jù)，這些繪畫數(shù)據(jù)是硬件通過藍(lán)牙發(fā)送過來的，每次接收2個(gè)數(shù)據(jù)，一個(gè)是電流大小，另一個(gè)是數(shù)據(jù)產(chǎn)生的時(shí)間。時(shí)間是記錄當(dāng)前數(shù)據(jù)產(chǎn)生的時(shí)間，由于數(shù)據(jù)是通過人為控制硬件產(chǎn)生的，如果數(shù)據(jù)沒有改變，那么時(shí)間就會(huì)是上次產(chǎn)生這個(gè)數(shù)據(jù)的時(shí)間，數(shù)據(jù)的產(chǎn)出頻率是60ms /次。

? ? 交流電的正弦圖像是通過兩個(gè)數(shù)據(jù)產(chǎn)生的，一個(gè)波峰，另一個(gè)波谷。而波長則是根據(jù)數(shù)據(jù)之間的時(shí)間間隔決定的（上次數(shù)據(jù)與這次數(shù)據(jù)之間的時(shí)間間隔），這也就決定著我們繪畫的點(diǎn)的數(shù)量（兩個(gè)數(shù)據(jù)點(diǎn)決定著一個(gè)正弦波，我們需要拆成多個(gè)點(diǎn)來繪畫這個(gè)弦）。

? ? ? ? 現(xiàn)在我們將正弦分成4各部分來畫

分波

繪畫代碼如下

區(qū)分直流電與交流電

1區(qū)域繪畫

2，3區(qū)域繪畫

4區(qū)域繪畫

? ? ? ? 由于交流電的波長是不可控的（時(shí)間間隔決定），因此每個(gè)數(shù)據(jù)點(diǎn)之間的屏幕點(diǎn)也不一定一樣，我給的范圍是16~40之間，換算下來就是每個(gè)數(shù)據(jù)點(diǎn)之間的間隔大概是8~20，而我們繪畫的范圍是600個(gè)屏幕點(diǎn)，數(shù)據(jù)量是60個(gè)，很容易導(dǎo)致越界，因此我要要做一個(gè)越界處理，超出部分直接不畫了，但這樣會(huì)導(dǎo)致短暫的數(shù)據(jù)延遲（暫時(shí)忽略）。

弦點(diǎn)數(shù)量的確定

? ? ? ? 繪畫思路：用三角函數(shù)求出每一個(gè)屏幕點(diǎn)對(duì)應(yīng)的高度，然后把他們連接后組成正弦波即可，