Question

我在HTML画布上放置了小图像（x = 50，y = 50，高度= 100，宽度= 100），特别是（修复）X，Y坐标，高度，图像宽度。
当我在正常的浏览器窗口中点击该图像时，我得到X，Y坐标。但是当我调整浏览器窗口大小时，我没有在点击该图像时获得正确的X，Y坐标。为什么？

<canvas  id="myCanvas"  height="720" width="1280"></canvas>

//点击画布时获取窗口的x值

    var canvasnew = document.getElementById("myCanvas");
    var rect = canvasnew.getBoundingClientRect(); 
    var mouseX=event.pageX - rect.left; // get X of canvas
    var mouseY=event.pageY - 14;// get Y of canvas
    var windowHeight = window.innerHeight;
    var windowWidth = window.innerWidth;
    //alert("windowHeight = "+ windowHeight +" , windowWidth = "+ windowWidth ); // window height, width
    var heightRatio = 720/windowHeight;
    var widthRatio = 1280/windowWidth;
    mouseX=mouseX*widthRatio;
    mouseY=mouseY*heightRatio;
    //alert("X= " + mouseX +" , Y= "+ mouseY); // x y coordinates on mouse click

if((mouseX>=x) && (mouseX<=Number(x)+Number(w)) && (mouseY>=y) && (mouseY<=Number(y)+Number(h)))
{
    alert(" clicked on image");
}

//使用以下代码在画布上绘制图像

imageobj[d] = new Image();  
(function(d)
{
imageobj[d].src = sitePath+"foldername/image.png"; // image path
imageobj[d].onload = function()
{
ctxupdate.drawImage(imageobj[d], 50, 50,100, 100);
};
})(d);

的jsfiddle： https://jsfiddle.net/pwszc9hb/

Answer 1

很难用您共享的代码来解决问题。

可能的解决方案：

如果您只是使用它来获取鼠标位置该怎么办：

var mouseX = event.pageX - canvasnew.offsetLeft,
var mouseY = event.pageY - canvasnew.offsetTop;

如果你缩放浏览器窗口，它也应该有用。

如何根据窗口大小调整更改X Y坐标

1 个答案: