HTML5 Получение внутренних координат холста внутри прокручиваемого div

Question

HTML5 Получение внутренних координат холста внутри прокручиваемого div

1

У меня есть холст, в котором я рисую изображение (оно представляет собой карту) размером 4000x4000 пикселей. Холст встроен в прокручиваемый div, размер которого меньше размера холста. Мне нужно получить координаты, по которым курсор мыши проходит по отношению к изображению 4000x4000, нарисованному на холсте, что означает, что нужно учитывать и возможную прокрутку.

<div class="" style="overflow: scroll; width:450px; height:200px;">
    <canvas id="map" onmousemove="getMousePos(event)">
    </canvas>
</div>

McKracken 01 июль 2017, в 20:13

Источник

Теги:

javascript

html5

canvas

1 ответ

Ещё вопросы

ɢʀᴜɴᴛ · Answer 1 · 2017-07-01T14-46-00.000Z

Вы можете получить точные координаты x и y мыши относительно холста, используя свойство offsetX и offsetY для MouseEvent.

function getMousePos(event) {
   var x = event.offsetX;
   var y = event.offsetY;
}

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ

function getMousePos(event) {
   var x = event.offsetX;
   var y = event.offsetY;
   console.clear();
   console.log(x, y);
}

<div class="cont" style="overflow: scroll; width:450px; height:400px;">
    <canvas id="map" width="4000" height="4000" onmousemove="getMousePos(event)" style="background-color: red;"/>
</div>

Я полагаю, что тогда я должен сдвинуть все количество прокрутки родительского узла (в данном случае div)