javascript – 撤消帆布FabricJs的重做历史

前端之家收集整理的这篇文章主要介绍了javascript – 撤消帆布FabricJs的重做历史前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在为我的FabricJs画布添加撤消/重做功能.我的想法是有一个计数器来计算画布修改(现在它计数添加对象).
我有一个状态数组,它将整个画布作为 JSON推送到我的数组.

然后我只想回想起各州

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

用户单击撤消时,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.

仍然需要改进处理图纸和物体.但这应该很简单.

原文链接:https://www.f2er.com/js/154174.html

猜你在找的JavaScript相关文章