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