缩放画布上的鼠标位置

Question

我有一个 100% 的画布 width 和 height。

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

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

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

但是，当我尝试使用 x 和 z 值在画布上绘制时，我没有得到正确的位置。

我需要画布/尝试使用百分比的原因是它将成为视频顶部的叠加层。并且用户必须在视频周围绘制一个矩形以获得偏移量，因为视频通常会显示黑色侧边栏来表示宽高比。

这是一个画布没有把矩形放在正确位置的例子：

http://jsfiddle.net/74CP8/

编辑：仅供参考：由于 jsfiddle 的工作方式明显，Firefox 似乎无法正确运行 jsfiddle。试试 Chrome。

Answer 1

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

第一个允许您在缩放的画布中正确移动鼠标

http://jsfiddle.net/74CP8/1/

第二个允许你从左上角到右下角画一个矩形。

http://jsfiddle.net/74CP8/2/

你的问题在这里：

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

您使用 x 和 y 作为百分比，而您需要它作为像素。

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