面料JS |滚动或拖动任何对象时显示不需要的线条

Posted 2023-03-25

【中文标题】面料JS |滚动或拖动任何对象时显示不需要的线条

【英文标题】：Fabric JS | Shows unwanted lines when scroll or drag any object

【发布时间】：2021-05-25 17:48:46

【问题描述】：

我正在从 JSON 加载数据。 当我尝试滚动或拖动任何对象时，无法弄清楚为什么画布上会显示不需要的线条。

此问题仅在从 JSON 加载时发生。 codepen link

代码笔中提供了示例数据

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

codepen link [

【参考方案1】：

从 json 加载数据后，您必须更改画布大小。您已将 100 像素添加到画布大小，但 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()
   

【参考方案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()
  

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