Question

我在互联网上看到如此多的教程如何使用canvas.loadFromJSON（），该参数使用JSON.stringify（canvas）。

但是如果我想通过一些使用JSON数据作为由fabric.Object.toJSON（）生成的参数的函数来制作fabric.Object。可能吗？如果不可能，那么fabric.Object.toJSON（）的目的是什么，在官方的fabricjs文档中找不到它如此有用。

基本上我只需要保存fabric.Group的每个对象，将其作为数据库表中的行记录完成，并在浏览器打开时将它们恢复到fabricjs画布。在我看来，使用canvas.add（object_converted_back_from_JSON）。

编辑：

Actualy我部分成功地实现了这些目标。使用以下代码：

fabric.util.enlivenObjects(JSONData, function(objects){
    objects.forEach(function(o) {
    App.viewer.fabricjsOverlay().fabricCanvas().add(o);
    });
    App.viewer.fabricjsOverlay().fabricCanvas().renderAll();
});

然而，恢复的物体变黑了。在我看来，它不能使用fabric.Group类创建一个基于JSON数据的对象。因为当我试图将对象作为单个fabric.Rect时，对象是按照我想要的正确创建的。

这是我想要转换为fabric.Group

的2个fabric.Group对象的JSON数据

var JSONData=[
  {"type":"group","originX":"left","originY":"top","left":5631.51,"top":1333.78,"width":4150.54,"height":2964.96,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","objects":[{"type":"rect","originX":"left","originY":"top","left":-2074.77,"top":-1481.98,"width":4149.54,"height":2963.96,"fill":"rgba(255,0,0,0.5)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0},{"type":"text","originX":"left","originY":"top","left":-2064.77,"top":-1471.98,"width":1661,"height":524.32,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"Test text 1","fontSize":400,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""}]},
  {"type":"group","originX":"left","originY":"top","left":12448.61,"top":1407.88,"width":6447.6,"height":4817.43,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","objects":[{"type":"rect","originX":"left","originY":"top","left":-3223.3,"top":-2408.21,"width":6446.6,"height":4816.43,"fill":"rgba(255,0,0,0.5)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","rx":0,"ry":0},{"type":"text","originX":"left","originY":"top","left":-3213.3,"top":-2398.21,"width":1661,"height":524.32,"fill":"rgb(0,0,0)","stroke":null,"strokeWidth":1,"strokeDashArray":null,"strokeLineCap":"butt","strokeLineJoin":"miter","strokeMiterLimit":10,"scaleX":1,"scaleY":1,"angle":0,"flipX":false,"flipY":false,"opacity":1,"shadow":null,"visible":true,"clipTo":null,"backgroundColor":"","fillRule":"nonzero","globalCompositeOperation":"source-over","text":"Test text 2","fontSize":400,"fontWeight":"normal","fontFamily":"Times New Roman","fontStyle":"","lineHeight":1.16,"textDecoration":"","textAlign":"left","textBackgroundColor":""}]}
]

FIXED：

问题实际上是关于我使用过的fabricjs。它是版本1.5.0，我认为是稳定的。但是当我改为最新版本的候选版本（v1.6.0-rc.1）时。这是我预期的工作。这个带有相同代码的2个小提琴网址会产生不同的结果： https://jsfiddle.net/bayucandra/32rr6xry/3/和https://jsfiddle.net/bayucandra/gp92h8Lh/2/。使用fabricjs v1.6.0-rc.1的最后一个URL按预期工作。

将fabric.Group.toJSON（）转换回fabric.Group

0 个答案: