kineticjs에서 실행 취소 - 다시 실행을 만드는 방법은 무엇입니까?

Question

는 이 취소 Kineticjs에 기능을 다시 만드는 방법 어떤 간단한 방법이 있습니까? https://github.com/ArthurClemens/Javascript-Undo-Manager에 HTML 5 실행 취소 관리자가 있지만 Kineticjs를 넣는 방법을 모르겠습니다. 제발 도와주세요. 감사합니다.

Answer 1

post by Chtiwi Malek at CodiCode을 기반으로 간단한 솔루션을 구현할 수있었습니다. 또한이 problem의 코드 중 일부를 직사각형을 그리는 예로 사용 했으므로 크레딧은 Chtiwi로 이동합니다.

내 솔루션의 유일한 차이점은 toJSON()을 사용하여 각 레이어 상태를 캔버스의 toDataURL() 대신 배열에 저장하는 것입니다. 캔버스에 각 액션을 저장하는 데 필요한 모든 데이터를 직렬화 할 수 있으려면 toJSON()이 필요하다고 생각하지만이 경우 100 %가 아니므로 다른 사람이 주석을 남기면 알고 있습니다.

function makeHistory() { 
    historyStep++; 
    if (historyStep < history.length) { 
     history.length = historyStep; 
    } 
    json = layer.toJSON(); 
    history.push(json); 
} 

실행 취소 또는 다시 실행하기위한 단계를 저장할 때마다이 기능을 호출하십시오. 필자의 경우 모든 mouseup 이벤트에서이 함수를 호출합니다.

이 두 기능을 실행 취소/다시 실행 이벤트에 바인딩하십시오.

function undoHistory() { 
    if (historyStep > 0) { 
     historyStep--; 
     layer.destroy(); 
     layer = Kinetic.Node.create(history[historyStep], 'container') 
     stage.add(layer); 
    } 
} 

function redoHistory() { 
    if (historyStep < history.length-1) { 
     historyStep++; 
     layer.destroy(); 
     layer = Kinetic.Node.create(history[historyStep], 'container') 
     stage.add(layer); 
    } 
} 

여기는 jsfiddle입니다. 배열을 초기화하고 위쪽으로 단계 카운터를 잊지 마세요. 행운을 빕니다!

Answer 2

나는 KineticJS에 익숙하지 않지만이 방법은 제공된 데모 (캔버스 사용)와 비슷해야합니다.

아마도 다른 예가 도움이됩니다. 악보를 나타내는 색상이 지정된 모양을 만들거나 이동하거나 삭제할 앱이 있다고 가정 해 보겠습니다. 클릭 한 번으로 드래그하고 강조 표시된 노트를 강조 표시하는 방법이 있습니다. 키보드에서 삭제를 누르면 기능 onDeleteGroup 호출 : 모든 음이 삭제됩니다

onDeleteGroup: function(gridModel) { 
    // collect all notes in an array 
    // ... 
    this._deleteGroup(notes); 
    this.undoManager.register(
     this, this._createGroup, [notes], 'Undo delete', 
     this, this._deleteGroup, [notes], 'Redo delete' 
    ); 
} 

을, 2 개 방법을 실행 취소 매니저에 등록됩니다

1. 실행 취소 기능 (생성됩니다 삭제의 취소)
2. 리두 기능 (/ 생성 실행 취소 다시 삭제됩니다 후)

두 함수는 간단합니다 :

_deleteGroup:function(notes) { 
    // removes each note from the model 
    // thereby removing them from the canvas 
    // ... 
} 

_createGroup:function(notes) { 
    // add each note to the model 
    // thereby adding them to the canvas 
    // ... 
} 

데이터 개체 (노트 배열)는 생성 및 삭제를 위해 전달됩니다. 단일 물체를 조작하는 경우에도 동일한 작업을 수행 할 수 있습니다.

Answer 3

내가는 기능을하는 클래스를 작성했습니다 : http://www.sebastianviereck.de/en/redo-undo-class-kinetic-js/

Answer 4

는, 이벤트 리스너 문제를 해결 나를 위해

$scope.makeHistory=function() { 
    $scope.historyStep++; 
    if ($scope.historyStep < $scope.history.length) { 
     $scope.history.length = $scope.historyStep; 
    } 
    var layerC = $scope.topLayer.clone(); 
    $scope.history.push(layerC); 
}; 

$scope.undoObject = function(){ 
    if($scope.historyStep > 0) { 
    $scope.historyStep--; 
    $scope.topLayer.destroy(); 
    if($scope.historyStep==0){ 
     $scope.topLayerAdd(2); // will put empty layer 
    } 
    else{ 
     var layer = $scope.history[$scope.historyStep-1].clone(); 
     $scope.topLayerAdd(1,layer); 
    } 
    $scope.topLayer.draw(); 
    } 
}; 

$scope.redoObject = function(){ 
    if($scope.historyStep <= $scope.history.length-1) { 
    $scope.historyStep++; 
    $scope.topLayer.destroy(); 
    var layer = $scope.history[$scope.historyStep-1].clone(); 
    if($scope.historyStep==0){ 
     $scope.topLayerAdd(2); // will put empty layer 
    } 
    else{ 
     $scope.topLayerAdd(1,layer); 
    } 
    $scope.topLayer.draw(); 
    } 
}; 

작품을 완벽하게 복제에 의해 해결하려면.