HTML5 Canvas에 실행 취소 기능을 추가하는 방법은 무엇입니까?

Question

모든 HTML5 및 자바 스크립트에서 스케치 응용 프로그램을 실행했으며 마지막으로 수행 한 작업을 실행 취소 할 수 있도록 실행 취소 단추를 만드는 방법이 궁금합니다. 어떤 생각?

Answer 1

모든 수정 사항을 데이터 구조에 저장해야합니다. 그런 다음 사용자가 을 실행 취소하려는 경우 최신 수정 사항을 삭제할 수 있습니다. 그런 다음 데이터 구조에서 다시 모든 그리기 작업을 다시 칠합니다.

Answer 2

http://arthurclemens.github.io/Javascript-Undo-Manager/에서 캔버스 요소로 실행 취소의 작동 예제가 있습니다. 수정을하면 실행 취소 관리자에게 실행 취소 및 다시 실행 메소드를 제공합니다. 실행 취소 스택의 위치 추적은 자동으로 수행됩니다. 소스 코드는 Github에 있습니다.

Answer 3

다른 옵션은 객체를 조작해야하는 경우 캔버스 API를 유지하는 라이브러리를 사용하여 캔버스를 SVG로 변환하는 것입니다. SVGKit

당신이 SVG가되면, 전체 캔버스를 다시 그릴 필요없이 객체 등을 제거하는 것이 훨씬 쉽습니다 :

적어도 하나의 라이브러리는이 시간 (11 월 2011)에 존재한다.

Answer 4

다음은 저에게 적합한 해결책입니다. 나는 파이어 폭스와 크롬의 최신 버전에서 그것을 시험해 보았다. 그리고 그것은 그 2 개의 브라우저에서 정말로 잘 작동한다.

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하기() 다시 할 수 있습니다.