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

Output specific variables in canvas JSON in Fabric.js

本文关键字：变量 JSON Fabric js 输出      更新时间：2023-09-26

我制作了一个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));
}
没有附加属性的JSON 
var json = canvas.toJSON();

包含的附加属性的JSON

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

没有默认值的JSON

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

您可以将replacer函数作为第二个参数传递给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);
相关文章：