Bir html tuvali süresiz nasıl "kaydır" yapabilirim?

Question

Ben yüklendiğinde otomatik olarak müşterinin tüm tarayıcı penceresini doldurur bir tuval öğesi var. Üzerinde herhangi bir "bir çizim tahtasının yapılması" sonucu olduğu gibi fare ile çizebilirsiniz. Ancak, ne yapmak istiyorum o, tuvale herhangi aşırı fareyi if (belli "hareket" -Tool seçmek belki ya, size istediğiniz herhangi bir yönde tuval sürükleyebilir) böylece onu yapmaktır kaydırır. Özellikle, teoride sonsuza kadar sürdürebilmeyi istiyorum, bu yüzden gerçekten önceden üretemiyorum, anında "daha fazla kanvas" üretmek zorundayım. Bunun nasıl yapılacağı konusunda herhangi bir fikri var mı?

$(document).ready(function() { 
    init(); 
}); 

function init() { 
    var canvas = document.getElementById('canvas') 
     , ctx = canvas.getContext('2d') 
     , width = window.innerWidth 
     , height = window.innerHeight; 

    // Sets the canvas size to be the same as the browser size 
    canvas.width = width; 
    canvas.height = height; 

    // Binds mouse and touch events to functions 
    $(canvas).bind({ 
     'mousedown': startDraw, 
     'mousemove': draw, 
     'mouseup': stopDraw, 
    }); 
}; 

// Triggered on mousedown, sets draw to true and updates X, Y values. 
function startDraw(e) { 
    this.draw = true; 
    this.X = e.pageX; 
    this.Y = e.pageY; 
}; 

// Triggered on mousemove, strokes a line between this.X/Y and e.pageX/Y 
function draw(e) { 
    if(this.draw) { 
     with(ctx) { 
      beginPath(); 
      lineWidth = 4; 
      lineCap = 'round'; 
      moveTo(this.X, this.Y); 
      lineTo(e.pageX, e.pageY); 
      stroke(); 
     } 
     this.X = e.pageX; 
     this.Y = e.pageY; 
    } 
}; 

// Triggered on mouseup, sets draw to false 
function stopDraw() { 
    this.draw = false; 
}; 

Answer 1

tuval eleman bilgisayarınızın gerçek bellek kullanan (html sadece tuval-etikettir), bu yüzden hiçbir sonsuz vardır: Eğer yardımı olacaksa

, bu javascript şu anda istemci tarafı olduğunu sonsuza kadar kayan tuval. Ancak, sanal bir tuval kullanarak bu davranışı simüle edebilirsiniz. Sadece draw() ile çekilen xy coords'ları bir diziye kaydedin ve fare bordüre dokunursa sanal kanvasın yeni merkezini hesaplayın. Daha sonra ortadaki ekran boyutuna uyan xy coords filtreleyin ve çizin.

Ancak sonsuz büyüyemez xy Coords kayıt dizi ve filtre kod dizisinin boyutu üzerinde daha yavaş olacaktır. 10.000 puan yeterli mi?

Daha optimize kod spline'lara içine fare Coords açmak ve fare (düzleştirilmiş) yolunu yeniden çizmek için gerekli tek noktalarını kaydeder.