Question

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

我放了一个简单的小提琴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对象创建初始画布视图，然后在3秒后清除它，然后在3秒后再次加载它（这只是模拟单击按钮或真实应用程序中的任何内容）。

如果以前已经处理过，请感谢任何有关此事的帮助和道歉。

干杯

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

的小提琴

Answer 1

我检查了你产品的对象，我看到当你第二次加载svg时，缺少所有'path'对象。

您也可以通过在第一次加载之前添加console.log而在第二次加载之前添加另一个来查看它。像这样：

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

无论如何，到了这一点，您只需要在尝试加载对象之前对其进行字符串化，这样就可以将所有对象保持为一个对象，

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

tmp = JSON.stringify( j );

看看，我在小提琴上更新你的代码：https://jsfiddle.net/5j7ejLmk/2/

如果您的答案正确无误，请将其标记为正确。祝你好运

使用Fabric.js

1 个答案: