我正在尝试为我的 Fabric.js 画布添加撤销/重做功能。我的想法是使用一个计数器来计算画布修改次数（目前它仅计算对象的添加）。我有一个状态数组，将整个画布作为 JSON 推送到数组中。
然后，我只想通过使用
来回溯状态。
canvas.loadFromJSON(state[state.length - 1 + ctr],
当用户点击“撤销”按钮时，计数器将减一并从数组中加载状态；当用户点击“重做”按钮时，计数器将增加一并从数组中加载状态。
当我在简单数字上进行操作时，一切都正常。但是在真实的 Fabric 画布上，我遇到了一些问题--它并不能正常工作。我认为这取决于我的事件处理程序。
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.
需要进一步改进以处理绘图和对象，但这应该很简单。
diff-patch或者tracking object version的工具。首先，监听所有对象变化：object:created, object:modified...，通过将canvas.toObject()保存在一个变量中来保存画布的第一个快照；下一次运行diffpatcher.diff(snapshot,canvas.toObject())，并仅保存补丁。要撤销，可以使用diffpatcher.reverse这些补丁。要重做，只需使用函数diffpatcher.patch。通过这种方式，您可以节省内存，但需要更多的CPU使用。重要的一点是最终的canvas.renderAll()应该在传递给loadFromJSON()的第二个参数的回调函数中被调用，像这样：
canvas.loadFromJSON(state, function() {
canvas.renderAll();
}
这是因为解析和加载JSON可能需要几毫秒的时间，在渲染之前您需要等待它完成。同时，当撤销和重做按钮被点击时，立即禁用它们，并仅在同一回调中重新启用。可以使用以下类似代码实现：
$('#undo').prop('disabled', true);
$('#redo').prop('disabled', true);
canvas.loadFromJSON(state, function() {
canvas.renderAll();
// now turn buttons back on appropriately
...
(see full code below)
}
// Fabric.js Canvas object
var canvas;
// current unsaved state
var state;
// past states
var undo = [];
// reverted states
var redo = [];
/**
* Push the current state into the undo stack and then capture the current state
*/
function save() {
// clear the redo stack
redo = [];
$('#redo').prop('disabled', true);
// initial call won't have a state
if (state) {
undo.push(state);
$('#undo').prop('disabled', false);
}
state = JSON.stringify(canvas);
}
/**
* Save the current state in the redo stack, reset to a state in the undo stack, and enable the buttons accordingly.
* Or, do the opposite (redo vs. undo)
* @param playStack which stack to get the last state from and to then render the canvas as
* @param saveStack which stack to push current state into
* @param buttonsOn jQuery selector. Enable these buttons.
* @param buttonsOff jQuery selector. Disable these buttons.
*/
function replay(playStack, saveStack, buttonsOn, buttonsOff) {
saveStack.push(state);
state = playStack.pop();
var on = $(buttonsOn);
var off = $(buttonsOff);
// turn both buttons off for the moment to prevent rapid clicking
on.prop('disabled', true);
off.prop('disabled', true);
canvas.clear();
canvas.loadFromJSON(state, function() {
canvas.renderAll();
// now turn the buttons back on if applicable
on.prop('disabled', false);
if (playStack.length) {
off.prop('disabled', false);
}
});
}
$(function() {
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Set up the canvas
canvas = new fabric.Canvas('canvas');
canvas.setWidth(500);
canvas.setHeight(500);
// save initial state
save();
// register event listener for user's actions
canvas.on('object:modified', function() {
save();
});
// draw button
$('#draw').click(function() {
var imgObj = new fabric.Circle({
fill: '#' + Math.floor(Math.random() * 16777215).toString(16),
radius: Math.random() * 250,
left: Math.random() * 250,
top: Math.random() * 250
});
canvas.add(imgObj);
canvas.renderAll();
save();
});
// undo and redo buttons
$('#undo').click(function() {
replay(undo, redo, '#redo', this);
});
$('#redo').click(function() {
replay(redo, undo, '#undo', this);
})
});<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" type="text/javascript"></script>
</head>
<body>
<button id="draw">circle</button>
<button id="undo" disabled>undo</button>
<button id="redo" disabled>redo</button>
<canvas id="canvas" style="border: solid 1px black;"></canvas>
</body>请注意，有一个类似的问题：Fabric.js中的撤销重做功能
commandmant这样的库与维护自己的带有历史记录的堆栈相比有什么好处。 - isapir
var rect = new fabric.Rect({ width: 156, height: 76, id: 'rectangle', fill: '#fbfbfb', centeredRotation: false, hasControls: false, hasRotatingPoint: false });如你所见，我有id: 'rectangle'（这是因为我想给每个形状一个唯一的ID）。问题是，在你发布的jsfiddle中，这个ID没有包含在json中。我该如何使这个属性包含在json中？谢谢。 - Tahmidname: 'rectangle ' + window.counter。当使用撤消或重做功能时，该属性会以某种方式变为“未定义”。 - Tahmid