标签：function Canvas 拖动 range 文档 时间轴 context 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像素，即滚动条往左，图往右。

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

标签：function,Canvas,拖动,range,文档,时间轴,context,hb
来源： https://www.cnblogs.com/BLackPeace/p/10563838.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。