Canvas - преобразование координат мыши при изменении размера окна

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

В данный момент то, что у меня есть, работает нормально, когда холст имеет размеры по умолчанию.

Я рисую всю свою графику на холсте, затем рисую это изображение на другом холсте и показываю его.

Итак, я хочу иметь возможность «выбрать» изображение на холсте.

Очевидно, я делаю это, сравнивая координаты мыши с координатами объекта.

   mouseX = mouse.x - window.offsetLeft; //I'm accounting for the offset

Затем я умножаю координаты мыши на (theVisibleCanvas.width / originalCanvas.width), чтобы учесть масштабирование холста.

Все это отлично работает, когда окно развернуто (размеры по умолчанию), но как только я изменил размер окна, координаты начинают отдаляться все дальше и дальше.

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


javascript canvas transformation
person Lee Brindley    schedule 17.11.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Предоставленная вами строка имеет мало общего с холстом, поскольку использует смещение окна, а не смещение холста.

Чтобы получить координаты мыши, настроенные на холст, вы можете использовать что-то вроде этого:

function getXY(canvas, event){

    var rect = canvas.getBoundingClientRect(), /// get absolute rect. of canvas
        x = event.clientX - rect.left,         /// adjust for x
        y = event.clientY - rect.top;          /// adjust for y

    return {x:x, y:y};                         /// return object
}

Теперь вы можете назвать это:

var pos = getXY(myCanvasElement, theEvent);
console.log(pos.x, pos.y);   /// use the pos object for something

Конечно, myCanvasElement является ссылкой на ваш фактический элемент холста, а theEvent предоставляется обратным вызовом.

person Community    schedule 17.11.2013