使用fabric.js在画布中保存JSON [英] Saving JSON in canvas with fabric.js

问题描述

我试图导入多个svg文件和修改后将json保存到数据库。我尝试使用

  canvas.item（0）.sourcePath ='/URL/FILE.svg'; 
 JSON.stringify（canvas.toDarianessJSON（））; 
  

但这不适用于多个文件，它只适用于第一个文件。我试图指定每一个文件的URL，但不能理解如何这样做。

解决方案

canvas.item （0） - 获取第一个对象。 canvas.item（1） - 获取第二个对象等等。

如果你不知道对象的总量，你可以使用画布。 forEachObject选项。

  canvas.forEachObject（function（obj）{
 obj.sourcePath ='/ URL / FILE。 svg'; 
 console.log（obj.sourcePath）
}）; 
 
 JSON.stringify（canvas.toDatalessJSON（））; 
  

您也可以像这样加载svg时设置obj.sourcePath。

  fabric.loadSVGFromString（svg，function（objects，options）{
 var obj = fabric.util.groupSVGElements（objects，options）; 
 obj.sourcePath ='/URL/FILE.svg'; 
 canvas.add（obj）; 
 canvas.renderAll（）; 
}）; 
  

希望有所帮助！

I am trying to import multiple svg file and after modification saving the json to database. I have tried to use

    canvas.item(0).sourcePath = '/URL/FILE.svg';
    JSON.stringify(canvas.toDatalessJSON());

but this won't work for multiple files, it works for the first file only. i am trying to specify every single file url but can't understand how this can be done. any solution please?

thanks in advance

解决方案

canvas.item(0) - gets the first object. canvas.item(1) - gets the second object and so on....

If you don't know the total amount of objects you can use the canvas.forEachObject option.

     canvas.forEachObject(function(obj){
        obj.sourcePath = '/URL/FILE.svg';
        console.log(obj.sourcePath)
     });

     JSON.stringify(canvas.toDatalessJSON());

You could also set obj.sourcePath when you load the svg like this.

    fabric.loadSVGFromString(svg, function(objects, options) {
      var obj = fabric.util.groupSVGElements(objects, options);
      obj.sourcePath = '/URL/FILE.svg';
      canvas.add(obj);
      canvas.renderAll();
    });

Hope that helps!

这篇关于使用fabric.js在画布中保存JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！