如何在转换后的HTML5画布上获取鼠标位置

Question

我正试图在转换后的画布上获取鼠标位置。这里是我的大小调整方法：

window.addEventListener('resize', resize); 
function resize() { 
    screenWidth = window.innerWidth; 
    screenHeight = window.innerHeight; 
    scaleFillNative = MathMAX(screenWidth/maxScreenWidth, screenHeight/maxScreenHeight); 
    mainCanvas.width = screenWidth; 
    mainCanvas.height = screenHeight; 
    mainContext.setTransform(scaleFillNative, 0, 0, scaleFillNative, Math.floor((screenWidth - (maxScreenWidth * scaleFillNative))/2), 
     Math.floor((screenHeight - (maxScreenHeight * scaleFillNative))/2)); 
} 

的maxScreenWidth和maxScreenHeight表示画布应该转变到本机屏幕尺寸。

实际调整大小工作正常。然而，问题是我试图在画布上的鼠标位置渲染一个圆。鼠标位置被设定为如下：

window.addEventListener('mousemove', gameInput, false); 
var mouseX, mouseY; 
function gameInput(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    mouseX = e.clientX; 
    mouseY = e.clientY; 
} 

然后它呈现像这样：

renderCircle(mouseX/scaleFillNative, mouseY/scaleFillNative, 10); 

x位置被正确地呈现。但是，当我调整窗口大小以使宽度小于高度时，它不再呈现在正确的x位置。 y位置始终偏移。

Answer 1

我完全不知道你至今尝试过，但一个基本的鼠标坐标变换画布（非偏斜），你就必须做

mouseX = (evt.clientX - canvas.offsetLeft - translateX)/scaleX; 
mouseY = (evt.clientY - canvas.offsetTop - translateY)/scaleY; 

但canvas.offsetXXX用不了滚动数额，所以这个演示代替使用getBoundingRect。

var ctx = canvas.getContext('2d'); 
 

 
window.addEventListener('resize', resize); 
 
// you probably have these somewhere 
 
var maxScreenWidth = 1800, 
 
    maxScreenHeight = 1200, 
 
    scaleFillNative, screenWidth, screenHeight; 
 

 
// you need to set available to your mouse move listener 
 
var translateX, translateY; 
 

 
function resize() { 
 
    screenWidth = window.innerWidth; 
 
    screenHeight = window.innerHeight; 
 
    // here you set scaleX and scaleY to the same variable 
 
    scaleFillNative = Math.max(screenWidth/maxScreenWidth, screenHeight/maxScreenHeight); 
 
    canvas.width = screenWidth; 
 
    canvas.height = screenHeight; 
 
    // store these values 
 
    translateX = Math.floor((screenWidth - (maxScreenWidth * scaleFillNative))/2); 
 
    translateY = Math.floor((screenHeight - (maxScreenHeight * scaleFillNative))/2); 
 

 
    ctx.setTransform(scaleFillNative, 0, 0, scaleFillNative, translateX, translateY); 
 
} 
 

 
window.addEventListener('mousemove', mousemoveHandler, false); 
 

 
function mousemoveHandler(e) { 
 
    // Note : I don't think there is any event default on mousemove, no need to prevent it 
 

 
    // normalize our event's coordinates to the canvas current transform 
 
    // here we use .getBoundingRect() instead of .offsetXXX 
 
    // because we also need to take scroll into account, 
 
    // in production, store it on debounced(resize + scroll) events. 
 
    var rect = canvas.getBoundingClientRect(); 
 
    var mouseX = (e.clientX - rect.left - translateX)/scaleFillNative, 
 
    mouseY = (e.clientY - rect.top - translateY)/scaleFillNative; 
 

 
    ctx.fillRect(mouseX - 5, mouseY - 5, 10, 10); 
 
} 
 

 
// an initial call 
 
resize();

<canvas id="canvas"></canvas>