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

本篇文檔記錄繪制心電圖之后，通過鼠標點擊，繪制出一條線，同時鼠標旁邊浮動出來字符長度。

想了解心電圖的同學可以查看我之前的技術文檔，里面有完整的代碼，

但看此篇文檔看懂之后可以理解如何通過鼠標點擊拖拽就能畫出圖形，以及如何讓標簽跟着鼠標移動。

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

<div>
<canvas id="celiang" width="750px" height="750px"></canvas>
</div>
<span id="mouseTip"></span>

然后需要考慮到，我們心電圖所要用到的線條，在鼠標按下的時候開始繪制、鼠標移動既是路徑，鼠標釋放時候，所畫的線條和記錄距離的標簽都應該消失。

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

.heartBeat {
  width: 750px;
  height: 750px;
  background: black;
}

#celiang {
  position: fixed;
  top: 20px;
  z-index: 5;
  display: none;
}

#mouseTip {
  background: red;
  display: none;
  position: absolute;
  pointer-events: none;
}

CSS設置完成之后，開始編輯JS，這里代碼我給出畫線和標簽跟着鼠標移動的，利用注釋划分

//根據網格單位測量心電圖相關距離
var canvas = document.getElementById("celiang"); // 得到畫布
var cl = canvas.getContext("2d"); // 得到畫布的上下文對象
var flag = false;
var x = 0; // 鼠標開始移動的位置X
var y = 0; // 鼠標開始移動的位置Y
var url = ""; // canvas圖片的二進制格式轉為dataURL格式
/* 為canvas綁定mouse事件 */

$("canvas")
  .mousedown(function(e) {
    flag = true;
    x = e.offsetX; // 鼠標落下時的X
    y = e.offsetY; // 鼠標落下時的Y
    // console.log(x, y);

    $("#mouseTip").css("display", "block");
    $("#celiang").css("display", "block");
    //當點擊鼠標，讓該canvas和span標簽出現
  })
  .mouseup(function(e) {
    flag = false;
    url = $("#celiang")[0].toDataURL();
    // 每次 mouseup 都保存一次畫布狀態
    cl.clearRect(0, 0, canvas.width, canvas.height);
    $("#mouseTip").css("display", "none");
    $("#celiang").css("display", "none");
    //當松開鼠標，讓該canvas和sapn標簽消失
  })
  .mousemove(function(e) {
    drawrule(e); // 繪制方法+
  });
function drawPencil(e) {
  if (flag) {
    cl.lineTo(e.offsetX, e.offsetY);
    cl.stroke();
    // 調用繪制方法
  } else {
    cl.beginPath();
    cl.moveTo(x, y);
  }
}
function drawrule(e) {
  if (flag) {
    cl.clearRect(0, 0, canvas.width, canvas.height);
    cl.beginPath();
    cl.strokeStyle = "#f00";
    cl.moveTo(x, y);
    cl.lineTo(e.offsetX, e.offsetY);
    cl.stroke();
    var xline = e.offsetX - x;
    var yline = e.offsetY - y;
    //定義兩個變量來記錄橫縱坐標的點擊點和拖動至的點的距離
    var print;
    //定義變量記錄輸出值
    // console.log(xline + "X");
    // console.log(yline + "Y");
    if (xline > -yline) {
      //判斷橫向距和縱向距離大小區別，發生變化時給出不同的單位
      xline *= 200 / 15;
      print = xline + "ms";
    } else {
      yline *= 0.5 / 15;
      print = yline + "mv";
    }
    document.getElementById("mouseTip").innerHTML = print;
  } //橫向15px=200ms,縱向15px=0.5mv
}

//標簽跟着鼠標移動
document.onmousemove = function(ev) {
  var oEvent = ev || event;
  var oDiv = document.getElementById("mouseTip");
  oDiv.style.left = oEvent.clientX + 10 + "px";
  oDiv.style.top = oEvent.clientY - 20 + "px";
  //距離鼠標的位置，
};

 

到此，完成設置利用鼠標繪制一條直線到canvas畫布，並且旁邊帶有跟動鼠標移動的標簽。

如果小伙伴們想了解完整的心電圖代碼，可以關注訂閱我之前的文檔進行學習

實現方法不唯一，這里只是給出我的一個比較奇葩的方法，希望在部分方面可以幫助到大家！

心電圖項目到此完畢！！