缩放画布上的鼠标位置

Question

我有一个宽度和高度都为100%的画布。

这是我正在开发的远程桌面的一部分。目前我卡住了，因为鼠标位置没有正确地反映在画布上。

当我将数据发送到桌面时，我必须补偿不同屏幕尺寸。

var x = Math.floor( mouse.x / canvas.width * 100 ); 
var y = Math.floor( mouse.y / canvas.height * 100 );

然而，当我尝试使用那些x和z值在画布上绘制时，我没有得到正确的位置。
我需要画布的原因/正在尝试使用百分比是因为它将成为视频上方的叠加层。用户必须在视频周围绘制一个矩形以获得偏移量，因为视频通常会显示纵横比的黑边栏。
这是一个画布示例，它没有将矩形放在正确的位置：
http://jsfiddle.net/74CP8/
编辑：FYI：由于jsfiddle的工作方式，Firefox似乎无法正常运行jsfiddle。 请尝试Chrome。

- Schoening

---

这篇文章可能会有所帮助：https://dev59.com/kXnZa4cB1Zd3GeqPoErj#20061533，它是我关于如何获取坐标的帖子，当使用CSS缩放时有效。 - GameAlchemist

Answer 1

我不确定你想要什么，但这里有两种可能的解决方案：

第一种允许您在缩放的画布中正确移动鼠标。 http://jsfiddle.net/74CP8/1/ 第二种允许您从左上角到右下角绘制一个矩形。 http://jsfiddle.net/74CP8/2/ 你的问题在这里：

ctx.rect(x,y,x+10, y+ 10)

您使用了x和y作为百分比，而需要将其转换为像素。

如果有其他问题，请不要犹豫。

- Thomas Hourlier

---

它们工作得很好！感谢您的回答！您能告诉我哪个部分您不理解，以便我可以编辑我的问题吗？ - Schoening

很高兴它适合你。我不确定用户是需要点击，然后移动鼠标并释放点击来绘制矩形，还是像我的解决方案2建议的那样直接绘制。 - Thomas Hourlier

是的，那是最终目标。但我想在之后自己找出来。 :p - Schoening

抱歉，我还有一个问题。你如何处理偏移量？从0,0到鼠标位置的距离可以正常工作。但是在其他任何地方，矩形将会比鼠标位置更远。http://jsfiddle.net/74CP8/3/ - Schoening

同时，在脚本加载后调整浏览器大小会“混淆”代码。 - mallwright