我使用fabric.js来创建自定义鞋子设计。我想添加撤消&重做功能进入它&我从fiddle link成功完成了这项工作。
我使用下面的代码来推送画布状态。
function changeLayer(direction) {
var activeObject = canvas.getActiveObject();
if (activeObject) {
if (direction == 'fore')
console.log(canvas.bringForward(activeObject));
else
console.log(canvas.sendBackwards(activeObject));
}
pushstate();
}
function pushstate() {
if (replayFlag === false) { // i.e. user modified something..
var itemProps = [];
for (var i in selectedObject) {
itemProps.push({
"itemNum": selectedObject[i].itemNum,
"left": selectedObject[i].left,
"top": selectedObject[i].top,
"scaleX": selectedObject[i].scaleX,
"scaleY": selectedObject[i].scaleY,
"angle": selectedObject[i].angle,
"flipX": selectedObject[i].flipX,
"flipY": selectedObject[i].flipY,
"fill": selectedObject[i].fill,
"fontSize": selectedObject[i].fontSize,
"fontFamily": selectedObject[i].fontFamily,
"textBackgroundColor": selectedObject[i].textBackgroundColor,
"fontWeight": selectedObject[i].fontWeight,
"fontStyle": selectedObject[i].fontStyle,
"textDecoration": selectedObject[i].textDecoration
});
}
// get current object properties
onObjectSelected();
undoHist.push({
"action": "modify",
"itemProps": itemProps
});
redoHist = [];
}
}
当我向前或向后移动元素时,撤消/重做功能无法正常工作。