Canvas繪製心電圖——畫線測量距離（Canvas鼠標點擊畫線+標籤跟隨鼠標移動）

時間 2019-12-07

原文原文鏈接

本篇文檔記錄繪製心電圖以後，經過鼠標點擊，繪製出一條線，同時鼠標旁邊浮動出來字符長度。css

想了解心電圖的同窗能夠查看我以前的技術文檔，裏面有完整的代碼，canvas

但看此篇文檔看懂以後能夠理解如何經過鼠標點擊拖拽就能畫出圖形，以及如何讓標籤跟着鼠標移動。學習

首先，咱們在HTML頁新建一個canvas標籤畫布。大小與以前的心電圖相同，而且給出一個標籤，該標籤設置跟着鼠標移動。url

1 <div>
2 <canvas id="celiang" width="750px" height="750px"></canvas>
3 </div>
4 <span id="mouseTip"></span>

而後須要考慮到，咱們心電圖所要用到的線條，在鼠標按下的時候開始繪製、鼠標移動既是路徑，鼠標釋放時候，所畫的線條和記錄距離的標籤都應該消失。spa

故須要加一條css語句，來實現初期隱藏畫線以及對span作block顯示以及隱藏code

 1 .heartBeat {
 2   width: 750px;
 3   height: 750px;
 4   background: black;
 5 }
 6 
 7 #celiang {
 8   position: fixed;
 9   top: 20px;
10   z-index: 5;
11   display: none;
12 }
13 
14 #mouseTip {
15   background: red;
16   display: none;
17   position: absolute;
18   pointer-events: none;
19 }

CSS設置完成以後，開始編輯JS，這裏代碼我給出畫線和標籤跟着鼠標移動的，利用註釋劃分對象

 1 //根據網格單位測量心電圖相關距離
 2 var canvas = document.getElementById("celiang"); // 獲得畫布
 3 var cl = canvas.getContext("2d"); // 獲得畫布的上下文對象
 4 var flag = false;
 5 var x = 0; // 鼠標開始移動的位置X
 6 var y = 0; // 鼠標開始移動的位置Y
 7 var url = ""; // canvas圖片的二進制格式轉爲dataURL格式
 8 /* 爲canvas綁定mouse事件 */
 9 
10 $("canvas")
11   .mousedown(function(e) {
12     flag = true;
13     x = e.offsetX; // 鼠標落下時的X
14     y = e.offsetY; // 鼠標落下時的Y
15     // console.log(x, y);
16 
17     $("#mouseTip").css("display", "block");
18     $("#celiang").css("display", "block");
19     //當點擊鼠標，讓該canvas和span標籤出現
20   })
21   .mouseup(function(e) {
22     flag = false;
23     url = $("#celiang")[0].toDataURL();
24     // 每次 mouseup 都保存一次畫布狀態
25     cl.clearRect(0, 0, canvas.width, canvas.height);
26     $("#mouseTip").css("display", "none");
27     $("#celiang").css("display", "none");
28     //當鬆開鼠標，讓該canvas和sapn標籤消失
29   })
30   .mousemove(function(e) {
31     drawrule(e); // 繪製方法+
32   });
33 function drawPencil(e) {
34   if (flag) {
35     cl.lineTo(e.offsetX, e.offsetY);
36     cl.stroke();
37     // 調用繪製方法
38   } else {
39     cl.beginPath();
40     cl.moveTo(x, y);
41   }
42 }
43 function drawrule(e) {
44   if (flag) {
45     cl.clearRect(0, 0, canvas.width, canvas.height);
46     cl.beginPath();
47     cl.strokeStyle = "#f00";
48     cl.moveTo(x, y);
49     cl.lineTo(e.offsetX, e.offsetY);
50     cl.stroke();
51     var xline = e.offsetX - x;
52     var yline = e.offsetY - y;
53     //定義兩個變量來記錄橫縱座標的點擊點和拖動至的點的距離
54     var print;
55     //定義變量記錄輸出值
56     // console.log(xline + "X");
57     // console.log(yline + "Y");
58     if (xline > -yline) {
59       //判斷橫向距和縱向距離大小區別，發生變化時給出不一樣的單位
60       xline *= 200 / 15;
61       print = xline + "ms";
62     } else {
63       yline *= 0.5 / 15;
64       print = yline + "mv";
65     }
66     document.getElementById("mouseTip").innerHTML = print;
67   } //橫向15px=200ms,縱向15px=0.5mv
68 }
69 
70 //標籤跟着鼠標移動
71 document.onmousemove = function(ev) {
72   var oEvent = ev || event;
73   var oDiv = document.getElementById("mouseTip");
74   oDiv.style.left = oEvent.clientX + 10 + "px";
75   oDiv.style.top = oEvent.clientY - 20 + "px";
76   //距離鼠標的位置，
77 };