使用 Fabric.js 重新加载 JSON 无法在 canvas 中正确呈现

Question

我对 Fabric.js 有点意见。我正在将 JSON 字符串加载到 canvas 中，然后在将来的某个时间我想再次加载更多 JSON （可能是相同的 JSON）。第一次加载似乎工作正常，但第二次加载有问题：前景路径对象没有出现，即使它的边界框是可点击的。我不确定这是与 backgroundImage 相关的问题，还是我在再次加载 JSON 之前清除 canvas 的方式，或者我加载 [=34] 的实际方式=]（或全部三个）。

我放了一个简单的 fiddle here。

var j = { ... }; //json object (see fiddle)
var c = new fabric.Canvas( document.getElementById("c") );

c.loadFromJSON(j, function(objects, options) {
c.renderAll();

setTimeout(function(){
    c.backgroundImage=0;
    c.clear();
    c.renderAll();

    setTimeout(function(){

        c.loadFromJSON(j, function(objects, options) {
            c.renderAll();
            c.setActiveObject(c.item(0));
        });

    },3000);
},3000);

});

我从 JSON 对象创建初始 canvas 视图，然后在 3 秒后清除它，然后再过 3 秒后再次加载它（这只是为了模拟单击按钮或真实应用程序中的任何内容）。

如果之前已经处理过，我们将不胜感激，我们深表歉意。

干杯

[编辑] 我注意到，如果我将 JSON 对象复制到第二个变量中，以便我初始化两个具有相同内容的对象，并在第二个循环中加载它，它将再次正确加载。原始 JSON 变量是否会被修改或缓存，从而导致问题？（fiddle 对于这个 here

Answer 1

我检查了您制作的对象，我发现当您第二次加载 svg 时，所有 'paths' 对象都丢失了。

你也可以看到它，通过在第一次加载之前添加一个 console.log 并在第二次加载之前添加另一个。像这样：

console.log(JSON.stringify(j));

总之，切中要点，你只需要在你尝试加载它之前将你的对象字符串化，这样你就可以将所有对象保持为一个，

我添加了一行将您的 svg 对象转换为 json 字符串并将其传递给临时变量

tmp = JSON.stringify( j );

看看，我更新了你的代码，在 fiddle: https://jsfiddle.net/5j7ejLmk/2/

如果您认为我的回答正确，请标记为正确。祝你好运

使用 Fabric.js 重新加载 JSON 无法在 canvas 中正确呈现

Reloading JSON fails to render correctly in canvas with Fabric.js

html5-canvas

fabricjs