无法弄清楚这一点，如何找到背景相对于画布的平移位置 . 我有字符坐标，我在画布中点击鼠标的坐标，但无法弄清楚如何找到偏移量 .
在画布中，当我点击某处时，无论我的角色在哪里，我都会得到（0,0） - （650,575）的（x，y）值，即窗口的大小 . 如果角色位于画布上的（2000,1500），则我的点击/触摸输入将始终向上发送角色，并在背景坐标上向左移动0,0 .
起初我以为我应该从最大宽度中减去玩家X的位置，然后在屏幕宽度的一半加一个偏移量，并对Y位置做同样的事情，但这不起作用 .
然后我尝试从当前玩家x，y值减去屏幕宽度/高度的一半，但这不起作用 .
任何人都指出我正确的方向，它似乎是初级的，但我无法弄清楚它是数学课以来的几年????谢谢
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 650;
canvas.height = 575;
var WIDTH=5000; //level width
var HEIGHT=3750; //level height
ctx.translate(-WIDTH*.5,-HEIGHT*.5); //starts in center of background
我的播放器开始加载的位置：
hero.x = WIDTH*.5+325; //offset half canvas width
hero.y = HEIGHT*.5+275; //offset half canvas height
对于背景：
ctx.drawImage(bgImage, BGsrcX , BGsrcY, 1250 , 938 ,-150, -150, BGdestW, BGdestH); `//image is stretched to 5000x3750`
这是我正在使用的鼠标输入
if(navigator.userAgent.match(/(iPhone)|(iPod)|(iPad)/i)){
document.addEventListener('touchstart', function(e) {
if(e.touches.length == 1){ // Only deal with one finger
var touch = e.touches[0]; // Get the information for finger #1
var x = touch.pageX - canvas.offsetLeft;
var y = touch.pageY - canvas.offsetTop;
//clickEvent(x,y); //call your function to manage tweets
}
},false);
}
else{
document.addEventListener('mousedown',function(e) {
var x = e.pageX - canvas.offsetLeft;
var y = e.pageY - canvas.offsetTop;
console.log(x+":"+y);
clickEvent(x,y); //call your function to manage tweets
},false);
}
对于实际平移背景的键盘输入：
if(16 in keysDown && 38 in keysDown && hero.y > 200) {ctx.translate(0,12); }
1 回答
不使用半翻译和非翻译坐标，翻译鼠标单击坐标和画布坐标 .
然后你可以使用简单的减法来找到偏移量，并找到距离，你可以使用距离公式 .