Холст, получающий доступ к координате переведенной позиции панорамирования фонового изображения

Question

Не могу разобраться, как найти переведенную позицию фона относительно холста.У меня есть координаты символов, и у меня есть координаты от щелчка мыши на холсте, но я не могу понять, как найти смещение.

На холсте, когда я щелкаю куда-то, я получаю (x, y) значение от (0,0) до (650 575), размер окна, где бы ни находился мой персонаж.Если символ находится на холсте (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); }

Answer 1

Не работайте с полупереведенными и непереведенными координатами, переводите координаты щелчка мышью И координаты холста.

Тогда вы можете просто использовать простое вычитание, чтобы найти смещение, и чтобы найти расстояние, вы используете формулу расстояния.