如何在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);
  }
}