画布访问平移背景图像平移位置的坐标

时间:2012-01-05 03:09:31

标签: javascript html5 canvas

无法解决这个问题,如何找到背景相对于画布的平移位置。我有字符坐标,我在画布中点击了鼠标,但无法弄清楚如何找到偏移量。

在画布中,当我点击某处时,无论我的角色在哪里,我都会得到(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 个答案:

答案 0 :(得分:0)

不使用半翻译和非翻译坐标,翻译鼠标单击坐标和画布坐标。

然后你可以使用简单的减法来找到偏移量,并且为了找到距离,你可以使用距离公式。