Получить реальное расположение мыши на холсте с двойным контекстом - PullRequest
Новая
       25

Получить реальное расположение мыши на холсте с двойным контекстом

0 голосов
/ 21 апреля 2020

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

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

Я проводил поиск и заметил, что " позади " холст существует на карте (.png) с уже установленными размерами в пикселях. Холст работает как камера, чтобы видеть часть карты.

Можно ли будет адаптировать мою функцию для считывания размеров карты и затем определить местонахождение фактических координат игрока? 

        var canvas = document.querySelector('canvas');
        var ctx = canvas.getContext("2d");

        canvas.addEventListener("click", function(e) { 
            var cRect = canvas.getBoundingClientRect();

            var scaleX = canvas.width / cRect.width;
            var scaleY = canvas.height / cRect.height;

            var canvasX = Math.round((e.clientX - cRect.left) * scaleX);
            var canvasY = Math.round((e.clientY - cRect.top) * scaleY);

            console.log("X: "+canvasX+", Y: "+canvasY);
        });

Эта функция даст мне только положение мыши в зависимости от размера холста, но карта больше, я оставлю здесь пояснительное изображение.

enter image description here

Надеюсь, вы меня поняли. Заранее спасибо.

1 Ответ

1 голос
/ 22 апреля 2020

Мир <=> Вид

Чтобы установить sh на местном языке, используются следующие термины:

  • Мир : система координат (в пикселях) of world / playfield / (красная рамка).
  • Просмотр : Система координат (в пикселях холста) холста / камеры / (синяя рамка).

Как указано в комментариях. Вам нужен вид происхождения. Это координаты верхней левой части холста в мировом пространстве.

Вам также необходимо знать масштаб вида. Это размер холста по отношению к миру.

Необходимая информация 

const world = {width: 2048, height: 1024}; // Red box in pixels
const view = {  // blue box
    origin: {x: 500, y: 20},      // in world scale (pixels on world)
    scale: {width: 1, height: 1}, // scale of pixels (from view to world)
}

Без этой информации вы не сможете выполнить преобразование. Он должен существовать так, как это требуется для рендеринга мирового контента на холст.

Обратите внимание , что если масштабы 1, они могут быть выведены только в системе рендеринга холста. Если вы не можете найти шкалу, используйте 1.

Примечание В этом ответе предполагается, что вращение вида отсутствует.

Вид => Мир

Следующая функция преобразует координаты вида в мировые координаты. 

function viewToWorld(x, y) { // x,y pixel coordinates on canvas
    return {
        x: x * view.scale.width + view.origin.x,
        y: y * view.scale.height + view.origin.y
    };     // return x,y pixel coordinates in world
}

Для использования в событии мыши, где клиентом является холст 

function mouseEvent(event) {
    // get world (red box) coords 
    const worldCoord = viewToWorld(event.clientX, event.clientY);

    // normalize
    worldCoord.x /= world.width;
    worldCoord.y /= world.height;
}

World => View

Вы можете отменить конвертацию. Это перемещение от мировых координат для просмотра координат со следующими функциями: 

function normalWorldToView(x, y) { // x,y normalized world coordinates
    return {
        x: (x * world.width - view.origin.x) / view.scale.width,
        y: (y * world.height - view.origin.y) / view.scale.height
    };     // return x,y pixel on canvas (view)
}

и в пикселях 

function worldToView(x, y) { // x,y world coordinates in pixels
    return {
        x: (x - view.origin.x) / view.scale.width,
        y: (y - view.origin.y) / view.scale.height
    };     // return x,y pixel on canvas (view)
}
...