La firma della tela su scroll cambia la posizione dell'estrazione del mouse

Question

Sto cercando di utilizzare la tela in modo che con un mouse una persona possa scrivere la propria firma. Tutto funziona finché non allungo o scorro lo schermo, quindi disegna la linea in un punto diverso dal mouse.

Il Codice:

function onMouseUp(event) { 
    'use strict'; 
    mousePressed = false; 
} 
function onMouseMove(event) { 
    'use strict'; 
    if (mousePressed) { 
     event.preventDefault(); 
     mouseX = event.clientX - can.offsetLeft - mleft; 
     mouseY = event.clientY - can.offsetTop - mtop; 
     ctx.lineTo(mouseX, mouseY); 
     ctx.stroke(); 
    } 
} 
function onMouseDown(event) { 
    'use strict'; 
    mousePressed = true; 
    mouseX = event.clientX - can.offsetLeft - mleft; 
    mouseY = event.clientY - can.offsetTop - mtop; 
    ctx.beginPath(); 
    ctx.moveTo(mouseX, mouseY); 
} 
can.addEventListener('mousemove', onMouseMove, false); 
can.addEventListener('mousedown', onMouseDown, false); 
can.addEventListener('mouseup', onMouseUp, false); 

HTML assomiglia: <canvas id="signature" width="567" height="150"></canvas>

Answer 1

event.clientX/Y è relativa all'angolo in alto a sinistra della finestra. Quindi lo scroll non viene preso in considerazione. event.pageX/Y è relativo al documento. Quindi è la posizione sullo schermo che l'evento è accaduto tra cui scorrimento. È possibile modificare tutti i riferimenti a clientX a pageX e clientY a pageY e dovrebbe funzionare.

Explanation of each screen/page/client XY.

Answer 2

Aggiungere l'offset dello schermo per la mouseX e mouseY scorrimento. con jQuery sarebbe simile a questa

mouseX = event.clientX - can.offsetLeft - mleft + $(window).scrollLeft; 
mouseY = event.clientY - can.offsetTop - mtop + $(window).scrollTop; 

Answer 3

Sembra che tu solo bisogno di un metodo più affidabile di ottenere le coordinate relative quando la pagina rientri.

@RyanArtecona ha scritto la seguente funzione in risposta a this question about mouse coordinates relative to a canvas:

function relMouseCoords(event){ 
    var totalOffsetX = 0; 
    var totalOffsetY = 0; 
    var canvasX = 0; 
    var canvasY = 0; 
    var currentElement = this; 

    do{ 
     totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft; 
     totalOffsetY += currentElement.offsetTop - currentElement.scrollTop; 
    } 
    while(currentElement = currentElement.offsetParent) 

    canvasX = event.pageX - totalOffsetX; 
    canvasY = event.pageY - totalOffsetY; 

    return {x:canvasX, y:canvasY} 
} 
HTMLCanvasElement.prototype.relMouseCoords = relMouseCoords; 

Questo è conveniente perché aggiunge una funzione per ottenere le coordinate relative a destra il prototipo della funzione HTMLCanvasElement, il che significa che si può semplicemente passare in un riferimento alla tela che si desidera utilizzare e ottenere le coordinate relative ad essa.

Usando questo si potrebbe riscrivere la vostra funzione mousedown (e si vorrà fare anche gli altri, ma solo per un esempio) come segue:

function onMouseDown(event) { 
    'use strict'; 
    mousePressed = true; 
    // get a reference to the 'signature' canvas 
    var canvas = document.getElementById('signature'); 
    // this returns an object with 'x' and 'y' properties 
    var mouse = canvas.relMouseCoords(event) 
    ctx.beginPath(); 
    // use the coordinates you got 
    ctx.moveTo(mouse.x, mouse.y); 
} 

Answer 4

modificare queste due righe

mouseX = event.clientX - can.offsetLeft - mleft; 
mouseY = event.clientY - can.offsetTop - mtop; 

a

mouseX = event.offsetX || event.layerX; 
mouseY = event.offsetY || event.layerY; 

in entrambi i gestori. Il browser può gestire le relative coordinate per te senza dover eseguire calcoli matematici speciali. offsetX/Y sembra specifico per Chrome/IE e layerX/Y fornisce supporto per Firefox.

Questo è un jsfiddle. Ho apportato un paio di lievi modifiche alla dichiarazione per far funzionare i tuoi use strict, poiché sembra che manchi un po 'del codice.

Answer 5

Questa non è una risposta semplice. Il modo migliore per capirlo è quello di iniziare con una buona base e quindi apportare le modifiche incrementali per la vostra situazione .. il miglior articolo che ho visto su questo argomento è da Explorer team di Internet:

Handling Multi-touch and Mouse Input in All Browsers

Questo l'articolo ti fornirà un'ottima base per catturare correttamente l'input del mouse.