撤消Fabric.js的重做

问题描述

我正在尝试向Fabric.js画布添加撤消/重做功能。我的想法是有一个计数器来计算画布修改（现在它计算对象的添加）。
我有一个状态数组，它将整个画布作为JSON推送到我的数组。

I'm trying to add undo/redo functionality to my Fabric.js canvas. My idea is to have a counter which counts canvas modifications (right now it counts the addition of objects).I have a state array, which pushes the whole canvas as JSON to my array.

然后我只想回忆一下

canvas.loadFromJSON(state[state.length - 1 + ctr],

当用户点击撤销时，ctr将减少1并将状态加载到数组之外;当用户点击重做时，ctr将增加1并加载状态超出数组。

As the user clicks on undo, ctr will reduce by one and load the state out of the array; as the user clicks on redo, ctr will increase by one and load the state out of the array.

当我用简单的数字体验这一点时，一切正常。使用真正的面料画布，我遇到了一些麻烦 - >它并没有真正起作用。我认为这取决于我的事件处理程序

When I experience this with simple numbers, everything works fine. With the real fabric canvas, I get some troubles --> it doesnt really work. I think this relies on my event handler

canvas.on({
   'object:added': countmods
});

在这里：

这里仅是工作数字示例（结果见控制台）：

here is the working numbers only example (results see console): jsFiddle

推荐答案

我自己回答了这个问题。

I answered this on my own.

请参阅：

我做了什么：

if (savehistory === true) {
    myjson = JSON.stringify(canvas);
    state.push(myjson);
} // this will save the history of all modifications into the state array, if enabled

if (mods < state.length) {
    canvas.clear().renderAll();
    canvas.loadFromJSON(state[state.length - 1 - mods - 1]);
    canvas.renderAll();
    mods += 1;
} // this will execute the undo and increase a modifications variable so we know where we are currently. Vice versa works the redo function.

仍然需要改进来处理图纸和对象。
但这应该很简单。

Would still need an improvement to handle both drawings and objects.But that should be simple.

这篇关于撤消Fabric.js的重做的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！