如何在變形的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>