如何在转换的HTML5 Canvas上获取鼠标位置 [英] How to get Mouse Position on Transformed HTML5 Canvas
问题描述
我试图在转换的画布上获得鼠标位置。这是我的resize方法:
I am trying to get the mouse position on a transformed canvas. Here is my resize method:
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表示画布应转换为的原生屏幕尺寸。
The maxScreenWidth and maxScreenHeight represents the native screen dimensions that the canvas should be transformed to.
实际调整大小正常。但问题是我试图在画布上的鼠标位置渲染一个圆圈。鼠标位置设置如下:
The actual resizing works fine. The issue however is that I am trying to render a circle at the mouse position on the canvas. The mouse position is set as follows:
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位置始终偏移。
The x position is rendered correctly. However when I resize the window so that the width is less than the height, it no longer renders at the correct x location. The y position is always offset.
推荐答案
到目前为止我还不知道你到底尝试了什么,但是对于转换后的画布基本鼠标坐标(非倾斜) ),你必须这样做
I don't know exactly what you have tried so far, but for a basic mouse coordinate to transformed canvas (non skewed), you'll have to do
mouseX = (evt.clientX - canvas.offsetLeft - translateX) / scaleX;
mouseY = (evt.clientY - canvas.offsetTop - translateY) / scaleY;
但是 canvas.offsetXXX
不需要滚动金额到帐户,所以这个演示使用 getBoundingRect
代替。
But canvas.offsetXXX
doesn't take scroll amount into account, so this demo uses getBoundingRect
instead.
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>
这篇关于如何在转换的HTML5 Canvas上获取鼠标位置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!