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

【问题标题】：Output specific variables in canvas JSON in Fabric.js在 Fabric.js 中的画布 JSON 中输出特定变量
【发布时间】：2013-11-30 19:01:49
【问题描述】：

我制作了一个 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));
}

【问题讨论】：

标签： javascript json html canvas fabricjs

【解决方案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();

【讨论】：

这节省了一天，但我想知道什么被认为是“附加属性”？

【解决方案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);

【讨论】：