我正在尝试为我的Fabric.js画布添加撤消/重做功能.我的想法是有一个计数器来计算画布修改(现在它计算对象的添加).我有一个状态数组,它将整个画布作为JSON推送到我的数组.
然后我只想回忆起各州
canvas.loadFromJSON(state[state.length - 1 + ctr],
当用户点击undo时,ctr将减1并将状态加载到数组之外; 当用户点击重做时,ctr将增加1并将状态加载到数组之外.
当我用简单的数字体验这一点时,一切正常.使用真正的面料帆布,我遇到了一些麻烦 - >它不起作用.我认为这取决于我的事件处理程序
canvas.on({ 'object:added': countmods });
jsfiddle在这里:
这里是工作数字唯一的例子(结果见控制台):jsFiddle
我自己回答了这个问题.
见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.
仍然需要改进来处理图纸和物体.但这应该很简单.