Kaydırmadaki tuval imzası, fareyi değiştirir.

Question

Tuvali kullanmaya çalışıyorum, böylece bir kişi fareyle imzasını yazabilir. Her şey ekran uzayana veya ekranda kaydırıncaya kadar çalışır, sonra çizgiyi fareden başka bir yere çeker.

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

Answer 1

event.clientX/Y gibi görünecektir görünümün sol üst köşesine göre olur. Yani kaydırma dikkate alınmaz. event.pageX/Y, belgeye göredir. Bu nedenle, ekranın kaydırma dahil olmak üzere gerçekleştiği konumdur. Tüm başvuruları clientX - pageX ve clientY - pageY olarak değiştirebilir ve çalışmalıdır. Sadece göreli koordinat zaman sayfa yeniden akış almanın daha güvenilir bir yöntem gerekiyor gibi

Explanation of each screen/page/client XY.

Answer 2

mouseX ve Farecik ekranın ofset kaydırma ekleyin:

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 gibi görünüyor. jQuery ile bu

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

Answer 3

görünüyor.

@RyanArtecona this question about mouse coordinates relative to a canvas cevaben aşağıdaki işlevi yazdı: o sadece geçebilir anlamına sağ HTMLCanvasElement fonksiyonun prototip üzerine göreceli koordinatları almak için bir işlev ekler çünkü

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; 

Bu uygundur Kullanmak istediğiniz tuvale referans olarak ve ona göre koordinatlar alın.

aşağıdaki gibi (ama sadece bir örnek için, ve siz de diğerlerini yapmak istersiniz) Eğer mousedown işlevini yeniden olabilir bu kullanma:

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

Değişim bu iki satırı

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

sizin işleyicileri hem

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

için. Tarayıcı herhangi bir özel matematik yapmak zorunda kalmadan sizin için göreceli koordinatları işleyebilir. offsetX/Y Chrome/IE'ye özgü ve layerX/Y Firefox desteğini alıyor. Bir jsfiddle. Kodun biraz eksik görünmesinden dolayı, use strict s çalışmanız için birkaç küçük değişiklik bildirimi yaptım.

Answer 5

Bu basit bir yanıt değildir. Bu anlamanın en iyi yolu, iyi bir temel ile başlamak ve daha sonra durumunuza artırımlı değişiklik yapmaktır .. Ben bu konuda gördüğüm en iyi makale, Internet Explorer Ekibinden geçerli:

Handling Multi-touch and Mouse Input in All Browsers

Bu Makale, fare girişini doğru şekilde yakalamak için harika bir temel sağlayacaktır.