首页 文章

FabricJS 2 - 将画布序列化为JSON

提问于
浏览 次
0

我将我的画布序列化为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();
};
javascript canvas fabricjs

1 回答

  • 2

    你可以像这样生成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')
  }
}
    回复于

相关问题