एचटीएमएल 5 कैनवास में पूर्व-कार्यक्षमता कैसे जोड़ें?

Question

मेरे पास सभी HTML5 और जावास्क्रिप्ट में एक स्केचिंग ऐप किया गया है, और मैं सोच रहा था कि मैं एक अंडो बटन कैसे बनाऊंगा, ताकि आप आखिरी चीज को पूर्ववत कर सकें। कोई उपाय?

Answer 1

आपको डेटास्ट्रक्चर में सभी संशोधनों को स्टोर करना होगा। यदि आप पूर्व को पूर्ववत करना चाहते हैं तो आप नवीनतम संशोधन को हटा सकते हैं। फिर आप अपने डेटास्ट्रक्चर से फिर से सभी ड्राइंग ऑपरेशंस को दोबारा दोहराएं।

Answer 2

http://arthurclemens.github.io/Javascript-Undo-Manager/ पर मेरे पास कैनवास तत्व के साथ पूर्ववत करने का एक उदाहरण है। जब आप एक संशोधन करते हैं, तो आप पूर्ववत प्रबंधक को पूर्ववत और फिर से विधियों को खिलाते हैं। पूर्ववत स्टैक में स्थिति का ट्रैकिंग स्वचालित रूप से किया जाता है। स्रोत कोड गीथूब में है।

Answer 3

अन्य विकल्प, यदि आपको ऑब्जेक्ट्स में हेरफेर करने की आवश्यकता है, तो कैनवास एपीआई को एक लाइब्रेरी का उपयोग करके अपने कैनवास को एसवीजी में परिवर्तित करना है जो एक पुनर्लेख को रोकने से रोकता है। SVGKit

एक बार जब आप एसवीजी है, यह बहुत पूरे कैनवास पुनः बनाने की आवश्यकता के बिना वस्तुओं और भी बहुत कुछ दूर करने के लिए आसान है:

कम से कम एक ऐसे पुस्तकालय इस बार (नवंबर 2011) पर मौजूद है।

Answer 4

यहां एक समाधान है जो मेरे लिए काम करता है। मैंने इसे फ़ायरफ़ॉक्स और क्रोम के नवीनतम संस्करणों में आजमाया है और यह उन दो ब्राउज़रों में वास्तव में अच्छा काम करता है।

var isFirefox = typeof InstallTrigger !== 'undefined'; 
var ctx = document.getElementById('myCanvas').getContext("2d"); 
var CanvasLogBook = function() { 
    this.index = 0; 
    this.logs = []; 
    this.logDrawing(); 
}; 
CanvasLogBook.prototype.sliceAndPush = function(imageObject) { 
    var array; 
    if (this.index == this.logs.length-1) { 
     this.logs.push(imageObject); 
     array = this.logs; 
    } else { 
     var tempArray = this.logs.slice(0, this.index+1); 
     tempArray.push(imageObject); 
     array = tempArray; 
    } 
    if (array.length > 1) { 
     this.index++; 
    } 
    return array; 
}; 
CanvasLogBook.prototype.logDrawing = function() { 
    if (isFirefox) { 
     var image = new Image(); 
     image.src = document.getElementById('myCanvas').toDataURL(); 
     this.logs = this.sliceAndPush(image); 
    } else { 
     var imageData = document.getElementById('myCanvas').toDataURL(); 
     this.logs = this.sliceAndPush(imageData); 
    } 
}; 
CanvasLogBook.prototype.undo = function() { 
    ctx.clearRect(0, 0, $('#myCanvas').width(), $('#myCanvas').height()); 
    if (this.index > 0) { 
     this.index--; 
     this.showLogAtIndex(this.index); 
    } 
}; 
CanvasLogBook.prototype.redo = function() { 
    if (this.index < this.logs.length-1) { 
     ctx.clearRect(0, 0, $('#myCanvas').width(), $('#myCanvas').height()); 
     this.index++; 
     this.showLogAtIndex(this.index); 
    } 
}; 
CanvasLogBook.prototype.showLogAtIndex = function(index) { 
    ctx.clearRect(0, 0, $('#myCanvas').width(), $('#myCanvas').height()); 
    if (isFirefox) { 
     var image = this.logs[index]; 
     ctx.drawImage(image, 0, 0); 
    } else { 
     var image = new Image(); 
     image.src = this.logs[index]; 
     ctx.drawImage(image, 0, 0); 
    } 
}; 
var canvasLogBook = new CanvasLogBook(); 

तो हर बार जब आप किसी भी बात तुम वहाँ के बाद रन समारोह canvasLogBook.logDrawing() कैनवास के स्नैपशॉट को संग्रहीत करने के लिए होगा आकर्षित और फिर आप canvasLogBook.undo() कॉल कर सकते हैं पूर्ववत और canvasLogBook.redo करने के लिए() फिर से करना।