मैं एचटीएमएल कैनवास कैसे "स्क्रॉल" अनिश्चित काल तक बना सकता हूं?

Question

मेरे पास एक कैनवास तत्व है जो लोड होने पर क्लाइंट की पूरी ब्राउज़र विंडो स्वचालित रूप से भरता है। उस पर आप माउस के साथ आकर्षित कर सकते हैं, जैसे किसी भी "ड्रॉइंग बोर्ड बनाएं" -ट्यूटोरियल के परिणामस्वरूप। मैं जो करना चाहता हूं वह ऐसा करना है ताकि यदि आप माउस को कैनवास के किसी भी चरम पर ले जाएं (या शायद एक निश्चित "चाल" का चयन करें, तो आप कैनवास को किसी भी दिशा में खींच सकते हैं), यह स्क्रॉल। विशेष रूप से, मैं चाहता हूं कि सिद्धांत सिद्धांत में हमेशा के लिए स्क्रॉल करना संभव हो, इसलिए मैं वास्तव में पूर्व-उत्पन्न नहीं कर सकता, मुझे फ्लाई पर "अधिक कैनवास" उत्पन्न करना होगा। क्या किसी को यह कैसे करना है इस पर कोई विचार है?

यदि यह मदद करता है, यह क्लाइंट साइड जावास्क्रिप्ट अभी है: (एचटीएमएल सिर्फ एक कैनवास टैग है)

$(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

कैनवास तत्व आपके कंप्यूटर के वास्तविक स्मृति का उपयोग करता है, इसलिए कोई अनंत है कैनवास जो हमेशा के लिए स्क्रॉल करता है। लेकिन, आप वर्चुअल कैनवास का उपयोग करके इस व्यवहार को अनुकरण कर सकते हैं। ड्रॉ() द्वारा एक सरणी में कब्जा कर लिया गया एक्सई कॉर्ड रिकॉर्ड करें और माउस छेद को छूने पर वर्चुअल कैनवास के एक नए केंद्र की गणना करें। फिर एक्सई कॉर्ड को फ़िल्टर करें जो केंद्र + - स्क्रीन आकार में फिट होते हैं और उन्हें आकर्षित करते हैं।

हालांकि, एक्सई कॉर्ड रिकॉर्डिंग सरणी असीम रूप से नहीं बढ़ सकती है और फ़िल्टर कोड सरणी के आकार पर धीमा हो जाएगा। क्या 10,000 अंक पर्याप्त हैं?

अधिक अनुकूलित कोड माउस कोनों को स्प्लिंस में बदल देगा और माउस के (चिकनाई) पथ को फिर से निकालने के लिए आवश्यक बिंदुओं को बचाएगा।