想了解心电图绘制过程的同学可以查看原先的技术文档,
单纯想了解JS放大缩小功能的,认真读懂此片文档。
写法很多,不唯一,在这里只举我的例子。
首先我们需要在原有的变量定义基础上增加两个变量:
之后开始写JS方法:
1 var mulNum = 1; //定义增益变量
2 var i = 1; //定义判断值变量
之后写增益变化方法(即JS编写放大缩小的判断):
//心电图波纹增益
function multiple() {
if (i == 4) {
i = 1;
}
i++;
switch (i) {
case 2:
mulNum = 2;
document.getElementById("multiple").innerHTML = "增益(20)";
break;
case 3:
mulNum = 0.5;
document.getElementById("multiple").innerHTML = "增益(5)";
break;
case 4:
mulNum = 1;
document.getElementById("multiple").innerHTML = "增益(10)";
break;
}
hide();//清除
draw();//重绘
}
这里的i要定义在外面,不然每次执行这个函数,都会重新加载一遍i=1,写在外面就不会发生这样的情况。
之后我们还需要在每次变化之后,将按钮原有的值做一个变化。所以利用inner。
之后我们将mulNum的值乘一下想要改变原来图形的坐标就可以了,在这里我是对心电图的Y轴的值做一个改变所以在Y轴乘mulNum即可:
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], a[1] * mulNum + 80);
11 });
12 /**for循环 */
13 hb.stroke();
14 hb.closePath();
15 }
就像文章开头提到的,想要实现任何功能的方法不唯一,我这只是提供一种我个人的思路,希望有大佬能有更简便易懂的方法互相交流讨论。
想了解心电图的朋友、或者只对这样几句代码不好理解的,可以关注我之前的几篇文档,把之前几篇文档合起来就是一篇完整的代码供参考。
//心电图波纹增益
function multiple() {
if (i == 4) {
i = 1;
}
i ++;
switch (i) {
case 2:
mulNum = 2;
document. getElementById( "multiple").innerHTML = "增益(20)";
break;
case 3:
mulNum = 0.5;
document. getElementById( "multiple").innerHTML = "增益(5)";
break;
case 4:
mulNum = 1;
document. getElementById( "multiple").innerHTML = "增益(10)";
break;
}
hide(); //清除
draw(); //重绘
}