javascript - kineticjsで元に戻す-やり直しを作成するには?

Question

Kineticjs で元に戻すやり直し機能を作成する簡単な方法はありますか? https://github.com/ArthurClemens/Javascript-Undo-ManagerでHTML 5 の Undo Manager を見つけましたが、Kineticjs の入れ方がわかりません。助けてください。ありがとうございました。

Answer 1

CodiCode での Chtiwi Malekの投稿に基づいて、簡単なソリューションを実装することができました。また、この問題のコードの一部を例として使用して、長方形を描画したので、クレジットはそれらと Chtiwi に送られます。

私のソリューションの唯一の違いは、キャンバス上の toDataURL() ではなく、 toJSON() を使用して各レイヤーの状態を配列に格納したことです。キャンバスに各アクションを保存するために必要なすべてのデータをシリアル化するには、 toDataURL() よりも toJSON() が必要だと思いますが、これについては 100% ではないので、他の誰かが知っている場合はコメントを残してください。

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

元に戻すまたはやり直すためにステップを保存するたびに、この関数を呼び出します。私の場合、すべてのマウスアップ イベントでこの関数を呼び出します。

これら 2 つの関数を Undo/Redo イベントにバインドします。

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

私は機能のためのクラスを書きました: http://www.sebastianviereck.de/en/redo-undo-class-kinetic-js/

Answer 3

イベントリスナーの問題を解決するには、クローンを作成して作業します

$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();  
  } 
};

私にとって完璧に機能します。