iOS—shaperLayer绘图(交流电直流电图形绘画)

话不多说,我们先上效果图

交流电图
直流电图

        由于drawReact方法过于消耗内存,此处我们选择用shaperlayer来绘画。

        首先我们确定绘画范围,然后在上面创建一个shaperlayer对象。已知我们当前的绘画宽度范围是600,我计划在上面绘画60个点,每个点之间距离是10个屏幕点,每当到来新的数据就抹去数组数据第一个元素。

        直流电绘画:

        对于直流电的绘画时间很容易的事,我们在绘画的时候,两点之间进行对比,如果大小一样,x轴加到10个距离点,并绘画。如果是不相等,在上一个点的x轴位置绘画衔接点,并在上一个点的x轴位置加大10个屏幕点绘画当前点,点准备好了之后,就可以用贝塞尔画线了。代码如下

iOS—shaperLayer绘图(交流电直流电图形绘画)_第1张图片
直流电绘画

        解决重绘问题:

        图绘好之后,现在就要解决重绘问题,由于shaper没有重绘的方法(不同于drawreact),因此我们就在下次绘画的时候删除当前绘画的layer,然后新建一个layer绘画。

        交流电的绘画:

        我先简单介绍下我们的数据,这些绘画数据是硬件通过蓝牙发送过来的,每次接收2个数据,一个是电流大小,另一个是数据产生的时间。时间是记录当前数据产生的时间,由于数据是通过人为控制硬件产生的,如果数据没有改变,那么时间就会是上次产生这个数据的时间,数据的产出频率是60ms /次。

    交流电的正弦图像是通过两个数据产生的,一个波峰,另一个波谷。而波长则是根据数据之间的时间间隔决定的(上次数据与这次数据之间的时间间隔),这也就决定着我们绘画的点的数量(两个数据点决定着一个正弦波,我们需要拆成多个点来绘画这个弦)。

        现在我们将正弦分成4各部分来画

iOS—shaperLayer绘图(交流电直流电图形绘画)_第2张图片
分波

绘画代码如下

iOS—shaperLayer绘图(交流电直流电图形绘画)_第3张图片
区分直流电与交流电


iOS—shaperLayer绘图(交流电直流电图形绘画)_第4张图片
1区域绘画


iOS—shaperLayer绘图(交流电直流电图形绘画)_第5张图片
2,3区域绘画


iOS—shaperLayer绘图(交流电直流电图形绘画)_第6张图片
4区域绘画

        由于交流电的波长是不可控的(时间间隔决定),因此每个数据点之间的屏幕点也不一定一样,我给的范围是16~40之间,换算下来就是每个数据点之间的间隔大概是8~20,而我们绘画的范围是600个屏幕点,数据量是60个,很容易导致越界,因此我要要做一个越界处理,超出部分直接不画了,但这样会导致短暂的数据延迟(暂时忽略)。


iOS—shaperLayer绘图(交流电直流电图形绘画)_第7张图片
弦点数量的确定

        绘画思路:用三角函数求出每一个屏幕点对应的高度,然后把他们连接后组成正弦波即可,

你可能感兴趣的:(iOS—shaperLayer绘图(交流电直流电图形绘画))