Question

我需要一个实时鼠标坐标图表示形式，该表示形式与图像中的相似（或其他接近于波形的形式），但我找不到实时鼠标轴数据的任何示例。任何人都知道存在这样的东西吗？

https://www.researchgate.net/profile/Magda_Havas/publication/228978746/figure/fig1/AS:300804272607236@1448728735830/An-oscilloscope-waveform-showing-the-60-Hz-blue-sine-wave-channel-1-and-the-high.png

Answer 1

我认为您需要这样的东西。

function showCoords(event) {
  var x = event.clientX;
  var y = event.clientY;
  var coor = "X coords: " + x + ", Y coords: " + y;
  document.getElementById("demo").innerHTML = coor;
}

function clearCoor() {
  document.getElementById("demo").innerHTML = "";
}

div {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

<div onmousemove="showCoords(event)" onmouseout="clearCoor()"></div>

<p id="demo"></p>

您可以了解更多 https://www.w3schools.com/jsref/event_clientx.asp

Answer 2

您需要在浏览器中使用Javascript吗？

添加事件监听器以获取坐标和时间值：

var initialTime = new Date().getTime();
document.addEventListener("mousemove", function(e) {
    var x = new Date().getTime() - initialTime;
    var y1 = e.x;
    var y2 = e.y;
    console.log(x, y1, y2);
}, true);

然后，您可以使用html5画布或使用诸如chart.js之类的解决方案来呈现它。

鼠标坐标样式示例

2 个答案: