面料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()
}  

宽度和高度键造成了问题。 这解决了问题