Question

我制作了一个Fabricjs画布，用户可以在其中移动图像等等......我使用JSON.stringify(canvas)来获取文本中的所有数据。问题是，当我只想要scaleX，ScaleY，Angle之类的某些数据时，我会获得所有数据。我怎么能这样做？

的 HTML 的

<div id="CanvasContainer">
    <canvas id="Canvas" width="270" height="519"></canvas>
</div>

的的Javascript 的

function exportData(){
    JSON.stringify(canvas);
    console.log(JSON.stringify(canvas));
}

Answer 1

没有附加属性的JSON

var json = canvas.toJSON();

包含其他属性的JSON

var json = canvas.toJSON(['lockMovementX', 'lockMovementY', 'lockRotation', 'lockScalingX', 'lockScalingY', 'lockUniScaling']);

没有默认值的JSON

canvas.includeDefaultValues = false;
var json = canvas.toJSON();

Answer 2

您可以将替换器函数作为第二个参数传递给JSON.stringify函数。

var wantedKeys = ['scaleX', 'scaleY', 'angle'];

JSON.stringify({ scaleX: 0, scaleY: 1, angle: 3, notThisOne: 4}, function (key, value) {
    if (!key || wantedKeys.indexOf(key) !== -1) return value;
}); //{"scaleX":0,"scaleY":1,"angle":3}

替换者也可以只是一组要保留的键：

JSON.stringify({ scaleX: 0, scaleY: 1, angle: 3, notThisOne: 4}, wantedKeys);

在Fabric.js中的canvas JSON中输出特定变量

2 个答案: