话不多说，我们先上效果图
交流电图
直流电图
由于drawReact方法过于消耗内存，此处我们选择用shaperlayer来绘画。
首先我们确定绘画范围，然后在上面创建一个shaperlayer对象。已知我们当前的绘画宽度范围是600，我计划在上面绘画60个点，每个点之间距离是10个屏幕点，每当到来新的数据就抹去数组数据第一个元素。
直流电绘画：
对于直流电的绘画时间很容易的事，我们在绘画的时候，两点之间进行对比，如果大小一样，x轴加到10个距离点，并绘画。如果是不相等，在上一个点的x轴位置绘画衔接点，并在上一个点的x轴位置加大10个屏幕点绘画当前点，点准备好了之后，就可以用贝塞尔画线了。代码如下
直流电绘画
解决重绘问题：
图绘好之后，现在就要解决重绘问题，由于shaper没有重绘的方法（不同于drawreact），因此我们就在下次绘画的时候删除当前绘画的layer，然后新建一个layer绘画。
交流电的绘画：
我先简单介绍下我们的数据，这些绘画数据是硬件通过蓝牙发送过来的，每次接收2个数据，一个是电流大小，另一个是数据产生的时间。时间是记录当前数据产生的时间，由于数据是通过人为控制硬件产生的，如果数据没有改变，那么时间就会是上次产生这个数据的时间，数据的产出频率是60ms /次。
交流电的正弦图像是通过两个数据产生的，一个波峰，另一个波谷。而波长则是根据数据之间的时间间隔决定的（上次数据与这次数据之间的时间间隔），这也就决定着我们绘画的点的数量（两个数据点决定着一个正弦波，我们需要拆成多个点来绘画这个弦）。
现在我们将正弦分成4各部分来画
分波
绘画代码如下
区分直流电与交流电
1区域绘画
2，3区域绘画
4区域绘画
由于交流电的波长是不可控的（时间间隔决定），因此每个数据点之间的屏幕点也不一定一样，我给的范围是16~40之间，换算下来就是每个数据点之间的间隔大概是8~20，而我们绘画的范围是600个屏幕点，数据量是60个，很容易导致越界，因此我要要做一个越界处理，超出部分直接不画了，但这样会导致短暂的数据延迟（暂时忽略）。
弦点数量的确定
绘画思路：用三角函数求出每一个屏幕点对应的高度，然后把他们连接后组成正弦波即可，
网友评论