javascript - 缩放 Canvas 上的鼠标位置

Question

我有一个 100% width 和 height 的 Canvas 。

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

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

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

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

我需要 Canvas /我尝试使用百分比的原因是它将覆盖在视频之上。并且用户必须在视频周围绘制一个矩形以获得偏移量，因为视频通常显示宽高比的黑色边栏。

这里是一个 Canvas 没有把矩形放在正确位置的例子:

http://jsfiddle.net/74CP8/

编辑:仅供引用:由于 jsfiddle 的工作方式，Firefox 似乎无法正确运行 jsfiddle。试试 Chrome。

Answer 1

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

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

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

第二个允许您从左上角到右下角绘制一个矩形。

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

你的问题在这里:

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

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

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