FabricJS 2 - 序列化帆布JSON

问题描述：

我序列化我的画布，以JSON和面临两个问题：FabricJS 2 - 序列化帆布JSON

我的画布不会被序列化的宽度和高度，但我需要这一点。

虽然普通颜色和图像作为画布背景将被序列化，但作为背景的渐变不会被序列化。我正在创建像我这样的背景渐变：

$scope.addGradient = function (left, right) { 
    var leftColor = document.getElementById('gradLeft').value; 
    var rightColor = document.getElementById('gradRight').value; 
    console.log(leftColor, rightColor); 

    var grad = new fabric.Gradient({ 
     type: 'linear', 
     coords: { 
      x1: 0, 
      y1: 0, 
      x2: canvas.width, 
      y2: canvas.height, 
     }, 
     colorStops: [{ 
      color: leftColor, 
      offset: 0, 
     }, 
      { 
       color: rightColor, 
       offset: 1, 
      } 
     ] 
    }); 
    canvas.backgroundColor = grad.toLive(canvas.contextContainer); 
    canvas.renderAll(); 
};

答

您可以像这样生成json。

GenerateCanvasJson(){ 
    return{ 
    leftColor: document.getElementById('gradLeft').value, 
    rightColor: document.getElementById('gradRight').value, 
    canvasWidth: canvas.original.width, 
    canvasHeight: canvas.original.height, 
    state: canvas.toJSON() 
    } 
}

如果你想保存对象的name和size 你可以做到这样。

GenerateCanvasJson(){ 
    return{ 
    leftColor: document.getElementById('gradLeft').value, 
    rightColor: document.getElementById('gradRight').value, 
    canvasWidth: canvas.original.width, 
    canvasHeight: canvas.original.height, 
    state: canvas.toJSON('name', 'size') 
    } 
}

我们现在使用是这样的：“fs.writeFile（文件名，JSON.stringify（油画）” - 将你的第一个功能也strigify所有与所有属性相同的画布上的对象JSON结构？或者该函数是否需要明确指定要将哪些道具串化？谢谢！ –

实际上，我想输出对象的所有已定义和所有默认值以及画布的尺寸和颜色。 .. –

你可以像这样保存'fs.writeFile（fileName，JSON.stringify（GenerateCanvasJson（））' –

FabricJS 2 - 序列化帆布JSON

相关推荐