mouse 相关问题

一个常见问题，但我仍然需要帮助。当有人在画布内单击时，我试图获取并存储鼠标坐标。我的 HTML 一个常见问题，但我仍然需要帮助。当有人在画布内单击时，我试图获取并存储鼠标坐标。我的 HTML <canvas id="puppyCanvas" width="500" height="500" style="border:2px solid black" onclick = "storeGuess(event)"></canvas> 和我的 JavaScript //setup canvas var canvasSetup = document.getElementById("puppyCanvas"); var ctx = canvasSetup.getContext("2d"); guessX = 0;//stores user's click on canvas guessY = 0;//stores user's click on canvas function storeGuess(event){ var x = event.clientX - ctx.canvas.offsetLeft; var y = event.clientY - ctx.canvas.offsetTop; /*guessX = x; guessY = y;*/ console.log("x coords:" + x + ", y coords" + y); 我阅读了大量相关论坛、w3schools 和视频。我即将弄清楚，但我错过了一些东西。如果删除ctx.canvas.offsetLeft和ctx.canvas.offsetTop，我可以获得页面的坐标。但我需要以某种方式合并这些来获取画布的坐标，然后将其存储到变量guessX和guessY中。您可以通过使用 offsetX 的 offsetY 和 MouseEvent 属性来实现这一点 //setup canvas var canvasSetup = document.getElementById("puppyCanvas"); var ctx = canvasSetup.getContext("2d"); guessX = 0; //stores user's click on canvas guessY = 0; //stores user's click on canvas function storeGuess(event) { var x = event.offsetX; var y = event.offsetY; guessX = x; guessY = y; console.log("x coords: " + guessX + ", y coords: " + guessY); } <canvas id="puppyCanvas" width="500" height="500" style="border:2px solid black" onclick="storeGuess(event)"></canvas> 我正在使用这段代码。 var myCanvas = document.querySelector('#canvas'); myCanvas.addEventListener('click', function(event) { var rect = myCanvas.getBoundingClientRect(); var x = event.clientX - rect.left; var y = event.clientY - rect.top; console.log("x: " + x + " y: " + y); }, false); <canvas width="400" height="400" id="canvas" style="background-color: lightblue"></canvas> 接受的答案是正确的，直到画布不适合内容。更通用的解决方案需要转换画布几何中的鼠标事件。 const canvasSetup = document.getElementById("puppyCanvas"); const ctx = canvasSetup.getContext("2d"); guessX = 0; //stores user's click on canvas guessY = 0; //stores user's click on canvas function storeGuess(event) { guessX = parseInt(event.offsetX*canvasSetup.width/canvasSetup.offsetWidth); guessY = parseInt(event.offsetY*canvasSetup.height/canvasSetup.offsetHeight); console.log(`x coords:${guessX}x${guessY}`); } <div style="height:100px;"> <canvas id="puppyCanvas" style="border:2px solid black;height:100%;" width="500" height="500" onclick="storeGuess(event)"></canvas> </div>

canvas coordinates mouse

回答 3 投票 0

用JS跟踪鼠标速度

使用纯 JS/JQuery 跟踪鼠标速度的最佳方法是什么？我想跟踪用户在各个方向（上/下/左/右）移动鼠标的速度。

javascript performance mouse

回答 8 投票 0

PyQt：如何确定同时按下哪个鼠标按钮以及哪个QTableView的单元格？

我用 QTableView 编写了一个 PyQt 应用程序，它应该插入一个新列以响应左键单击，并删除一个列以响应鼠标右键单击其单元格。我应该连接什么信号...

python events pyqt mouse qtableview

回答 1 投票 0

JavaScript如何将鼠标光标更改为图像？

我见过一些示例，您可以将其更改为操作系统具有的预设图像；例子： $('body').css('光标', '等待'); 但我自己的 /img/my_image.png 怎么样？感谢您的帮助。