如何在kineticjs中创建Undo-Redo？ [英] How to create Undo-Redo in kineticjs?

问题描述

有没有简单的方法来创建Kineticjs中的 undo redo 函数？
我在 https://github.com/ArthurClemens中找到了HTML 5的撤消管理器/ Javascript-Undo-Manager ，但我不知道如何放入Kineticjs，请帮助我。
谢谢。

解决方案

我能够实现一个基于由CtiCode的Chtiwi Malek发布。我还使用了这个问题中的一些代码作为示例来绘制矩形，所以学分去他们和Chtiwi。

我的解决方案的唯一区别是我用jSON（）来存储每个图层状态在一个数组中，而不是toDataURL（）在画布上。我认为toJSON（）对于toDataURL（）是需要的，以便能够序列化所有必要的数据以将每个动作存储在画布上，但我不是100％的，因此如果其他人知道，请留下评论。

 函数makeHistory（）{
 historyStep ++; 
 if（historyStep< history.length）{
 history.length = historyStep; 
} 
 json = layer.toJSON（）; 
 history.push（json）; 
 
 $ / code> 

每次您想要保存一个步骤以撤销或重做时调用此函数。在我的例子中，我在每个mouseup事件中都调用了这个函数。

将这两个函数绑定到Undo / Redo事件。

  function undoHistory（）{
 if（historyStep> 0）{
 historyStep--; 
 layer.destroy（）; 
 layer = Kinetic.Node.create（history [historyStep]，'container'）
 stage.add（layer）; 
 
 
 
函数redoHistory（）{
 if（historyStep< history.length-1）{
 historyStep ++; 
 layer.destroy（）; 
 layer = Kinetic.Node.create（history [historyStep]，'container'）
 stage.add（layer）; 
 
 
  

以下是 jsfiddle 。不要忘记初始化数组，并将计数器放在顶部。祝你好运！

Is there any simple way how to create undo redo function in Kineticjs ? I have found a Undo Manager for HTML 5 in https://github.com/ArthurClemens/Javascript-Undo-Manager, but I don't know how to put in Kineticjs, please help me. thank you.

解决方案

I was able to implement a simple solution based on a post by Chtiwi Malek at CodiCode. I also used some of the code from this problem as an example to draw rectangles, so credits go to them and Chtiwi.

The only difference in my solution is I used toJSON() to store each layer state in an array instead of toDataURL() on the canvas. I think toJSON() is needed over toDataURL() to be able to serialize all the data necessary to store each action on the canvas, but I'm not 100% on this so if someone else knows please leave a comment.

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

Call this function everytime you want to save a step to undo or redo. In my case, I call this function on every mouseup event.

Bind these 2 functions to the Undo/Redo events.

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

Here's the jsfiddle. Don't forget to initialize the array and step counter up top. Good luck!

这篇关于如何在kineticjs中创建Undo-Redo？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！