如何在Fabric JS中将免费图形分为多个部分

Question

我想在Fabric JS中使用撤消选项。 但是，我不想一次删除一条完整的自由绘制线，而是要逐条删除它。 是否有捷径可寻？

Answer 1

由于绘制时的路径是一个接一个地添加的，因此您可以按以下方式实现它（让我们假设app是app根对象）：

1）具有路径数组，画布JSON表示形式并标记已初始化绘图

app.isDrawingMode = false; //should be toggled when you're adding other elements
app.__state = [];

2）订阅每个添加的路径（如果正在绘制）

canvas.on('object:added', function(e) {
  if (app.isDrawingMode && e.target && e.target.path && e.target.path.length) {
    app.saveToHistory();
  }
});

app.saveToHistory = function() {
  var myjson = this.__canvas.toObject();
  this.__state.push(JSON.stringify(myjson));
}

3）撤消功能

app.undo = function() {
  if (app.__state.length > 1) {
    canvas.clear();
    var stateNumber = app.__state.length - 2;
    canvas.loadFromJSON(JSON.parse(this.__state[stateNumber]),
    canvas.renderAll.bind(canvas));
    app.__state.splice(-1, 1);
  }
}