面料JS | 滾動或拖動任何 object 時顯示不需要的線條

Question

我正在從 JSON 加載數據。 當我嘗試滾動或拖動任何 object 時，無法弄清楚為什么 canvas 上會顯示不需要的線條。

此問題僅在從 JSON 加載時發生。 代碼筆鏈接

codepen 中提供了示例數據

canvas.loadFromJSON(JsonData, canvas.renderAll.bind(canvas));
canvas.renderAll()

代碼筆鏈接[

Answer 1

從 json 加載數據后，您必須更改 canvas 大小。 您已將 100px 添加到 canvas 大小，但 json 數據中的視口大小較小，這會導致“死區”區域不會在渲染中更新。

function initJsonData(JsonData){
  var size = Math.max(JsonData.width,JsonData.height) + 100;
  canvas.loadFromJSON(JsonData, canvas.renderAll.bind(canvas));
  canvas.setWidth(size);
  canvas.setHeight(size);   
  canvas.renderAll()
}   

Answer 2

function initJsonData(JsonData){
  var size = Math.max(JsonData.width,JsonData.height) + 100;
  var tempJsonData = JsonData
  delete tempJsonData .height
  delete tempJsonData .width
  canvas.loadFromJSON(tempJsonData , canvas.renderAll.bind(canvas));
  canvas.renderAll()
}  

寬度和高度鍵造成了問題。 這解決了問題