撤消和重做历史记录帆布FabricJs [英] Undo Redo History for Canvas FabricJs

问题描述

我试图撤销/重做功能添加到我的FabricJs画布。我的想法是有它计算帆布修改（现在它计数增加的对象）的计数器。
我有一个状态数组，推动整个画布作为JSON我的数组。

I'm trying to add undo/redo functionality to my FabricJs 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.

然后，我只是想回忆与美国

Then I simply want to recall the states with

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

当用户点击撤消，点击率就会减少一个，并加载状态出数组的;当用户点击重做，点击率都加并加载状态出数组中。

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

的jsfiddle 是在这里：

这里是工作号码唯一的例子（见结果控制台）：的jsfiddle

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

推荐答案

我回答了这个对我自己的。

I answered this on my own.

请参阅的jsfiddle ：

我做了什么：

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.

这篇关于撤消和重做历史记录帆布FabricJs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！