Платно - трансформиране на координатите на мишката при промяна на размера на прозореца

Работя върху проект за платно, който включва някои функции за плъзгане и пускане за някои растерни изображения върху платното. Имам проблем с избирането на изображения, след като платното е преоразмерено.

В момента това, което имам, работи добре, когато платното е с размерите си по подразбиране.

Рисувам всичките си графики върху платно, след което рисувам това изображение върху друго платно и го показвам.

Така че искам да мога да „избера“ изображение върху платното.

Очевидно правя това, като сравнявам координатите на мишката с координатите на обекта.

   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 е препратка към вашия действителен елемент canvas, а theEvent се предоставя от обратното извикване.

person Community    schedule 17.11.2013