文档章节

Canvas绘制心电图——range控制时间轴(range改变Canvas拖动即刻触发)

o
 osc_fmg49rzg
发布于 2019/03/20 11:28
字数 504
阅读 12
收藏 0
hb

本篇技术文档紧接上文内容,是通过range改变心电图的时间轴,完整代码可以查看订阅我之前的文档。

同理该技术等于通过range控制Canvas的位置或者大小,不用松手,不用点击确定按钮,单纯拖动就能即时改变,读懂该篇文档即能理解,

实现方法不唯一,这里只展示我用到的方法。

首先考虑完美因素,我们在HTML页面上加一个时间显示标签,让range在拖动的时候,就能显示时间,代码如下:

1 时间:<input type="range" id="timeRange" min="0" max="10" value="0" step="1"/>
2 <span id="time">0</span>

这样就可以即时输出数字到span标签内

之后创建一个初始时间变量:

1 var range = 0; //定义初始时间

创建完成之后,开始编写触发鼠标事件的根据range拖动随机产生变化的函数事件

 1 //range改变心电图显示时间段
 2 $(function() {
 3   $("#timeRange").on("mouseover", function() {
 4     var $context = $(this);
 5     if ($context.data("event")) return;
 6     $context.data("event", "bindChange");
 7 
 8     $context.one("mousedown", function() {
 9       $(document).on("mousemove", function() {
10         //range改变回调
11         range = document.getElementById("timeRange").value;
12         hide();
13         draw();
14         //每次鼠标移动的时候,监听值之后,重画canvas内容
15         document.getElementById("time").innerHTML = range;
16         //将拖动后的值写入span标签
17       });
18     });
19   });
20 });

之后将range的值,加在要发生变化的坐标上即可

 1 /**绘制心电图 */
 2 function drawLine(c_canvas) {
 3   hb = c_canvas.getContext("2d");
 4   hb.strokeStyle = "#0f0";
 5   //线条颜色为绿色
 6   hb.strokeWidth = 2;
 7   //线条粗细为2
 8   hb.beginPath();
 9   beatArray.forEach(a => {
10     hb.lineTo(a[0] + range * -30, a[1] * mulNum + 80);
11     // 横坐标+时间单位x像素,纵坐标x增益+横轴位置
12   });
13   /**for循环 */
14   hb.stroke();
15   hb.closePath();
16 }

-30是为了每次反方向移动30像素,即滚动条往左,图往右。

完整代码可以关注我前几篇文档。

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

OSChina 周五乱弹 —— 你大妈还是你大妈

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @watergood:是时候分享一波我的这张纯音乐歌单了,过去的五年多时间里,我陆陆续续地把听到的好听的纯音乐添加了进去,目前一共65首,相信总...

小小编辑
今天
25
0
在Objective-C中生成随机数 - Generating random numbers in Objective-C

问题: I'm a Java head mainly, and I want a way to generate a pseudo-random number between 0 and 74. In Java I would use the method: 我主要是Java头,我想要一种生成0到74之间的伪随......

技术盛宴
今天
13
0
ftp-ftps-sftp的关系

Ftp FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”。用于Internet上的控制文件的双向传输。同时,它也是一个应用程序(Application)。基于不同的操作...

独钓渔
今天
12
0
使Vim将所有空格显示为字符 - Make Vim show ALL white spaces as a character

问题: I can't find a way to make Vim show all white spaces as a character. 我找不到让Vim将所有空白显示为字符的方法。 All I found was about tabs, trailing spaces etc. 我发现的只......

富含淀粉
今天
23
0
RN 接入高德地图遇到的一些问题

react-native-amap-geolocation、react-native-amap3d 1、iOS Geolocation.getCurrentPosition 获取坐标后,没有返回 address 信息? 逆地理编码 Android 默认返回逆地理编码,而 iOS 需要手...

Jack088
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部