fabric.js 对象串回对象不工作

Question

我希望能够获取我的

fabric.js

canvas 对象，并且需要对其进行字符串化，然后将其解析回一个对象。我将此画布设置为模拟将

fabric.js

线对象转换为字符串并解析回对象。当我进行字符串化时，我得到了更多数据，但在将其添加到画布时出现错误。

<canvas id="demoCanvas"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>
<script type="text/javascript">
const myCanvas = new fabric.Canvas("demoCanvas", {
  backgroundColor: "beige",
});
const line = new fabric.Line([50, 100, 200, 100],{
    left: 160,
    top: 70,
    strokeWidth: 8,
    stroke: 8,
    padding: 12,
    angle: 90,
    //flipY: true,
    rotatingPointOffset: 92,
  });
console.log("first output", line);
const newLine = JSON.stringify(line);
console.log("string", newLine);
const newLine2 = JSON.parse(newLine);
console.log("back to obj", newLine2);
myCanvas.add(newLine2);
myCanvas.setActiveObject(newLine2);
</script>

我期待得到与直接从

fabric.js

行相同的输出。

Answer 1

你正在将一个

fabric.Line

对象转换为一个 json 字符串，并期望解析回该字符串会给你相同的对象，但事实并非如此，你从

JSON.parse

得到的是一个通用对象而不是原始行.

您可以使用的是将选项或坐标字符串化，您可以解析然后重新使用以创建新行，请参见下面的示例代码：

const myCanvas = new fabric.Canvas("demoCanvas", {backgroundColor: "beige"})
const coords = [0, 0, 90, 90]
const options = {
  left: 90,
  top: 0,
  strokeWidth: 8,
  stroke: 8
}

console.log("first output", options)
const opt = JSON.stringify(options)
console.log("string", opt)
const opt2 = JSON.parse(opt)
console.log("back to obj", opt2)

const line = new fabric.Line(coords, opt2)
myCanvas.add(line)

<canvas id="demoCanvas" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>