在使用自定义属性从json加载对象后，如何在fabric js版本1.7.22中创建对象组？

Question

我使用的是fabricJS版本1.7.22。我想实现分组和取消分组的功能。

当我使用toJSON（list_of_custom_attribute）将我的画布转换为json时。我的自定义属性未添加到json中。 （包含在组中的subObject的自定义属性不会添加到json中）。

是否有任何分组补丁，因此，每次我的所有自定义属性都添加到组的对象中。

我的分组代码如下（我从最新fabricJS版本2.7.0的fabricJS toGroup（）函数借用此代码）：

var activeObject = this.canvas.getActiveGroup();
    var objects = activeObject._objects.concat();
    activeObject._objects = [];
    var options = fabric.Object.prototype.toObject.call(activeObject);
    var newGroup = new fabric.Group([]);
    delete options.type;
    newGroup.set(options);
    objects.forEach(function (object) {
        if (object) {
            object.canvas.remove(object);
            object.group = newGroup;
        }
    });
    newGroup._objects = objects;
    if (!activeObject.canvas) {
        return newGroup;
    }
    else {
        var canvas = activeObject.canvas;
        that.extend(newGroup, that.randomId());
        canvas.add(newGroup);
        canvas._activeObject = newGroup;
        newGroup.setCoords();
    }

我尝试了一些可能有助于理解问题的场景。 （我的所有canvas对象必须包含名为'id'的custom_attribute）

1）添加一个图像并克隆该图像。现在将canvas转换为json。 （JSON包含我的所有自定义属性，例如this => [rect [id]，circle [id]]）。

2）添加一个图像并克隆该图像并将这两个图像分组。现在将canvas转换为json。 （JSON包含我的所有自定义属性：=> group（rect [id]，circle [id]））

3）添加一个图像并克隆该图像。现在将canvas转换为json（这就像第一个场景）。现在清除画布并再次将json加载到画布中。现在把这两个对象组成一组。并将canvas转换为json，看起来像这样=> group（rect []，circle []）

执行loadfromJSON之后的主要问题。 （方案3）在loadfromJSON之后，我的组对象不包含自定义属性。因为我的canvas json不包含该属性。

Answer 1

要获得JSON使用selected.toJSON(allCustomAttr)并克隆使用object#clone。

var canvas = document.getElementById('c');
var c = new fabric.Canvas(canvas);
c.setHeight(500);
c.setWidth(500);
var allCustomAttr = ['customSourceType', 'id'];
var groupbtn = document.getElementById('group');
var unGroupbtn = document.getElementById('ungroup');
var reload = document.getElementById('reload');
var getJSON = document.getElementById('getJSON');
var selected;

function extend(object, attr) {
  //object.set(attr);
  object.toObject = (function(toObject) {
    return function() {
      return fabric.util.object.extend(toObject.call(this), attr);
    };
  })(object.toObject);
}

c.on({
  'object:selected': function(e) {
    selected = e.target;
    console.log('selected', selected);
    console.log('selected', selected.toJSON(allCustomAttr));
  }
})

getJSON.addEventListener('click', function() {
  console.log('canvas json', c.toJSON(allCustomAttr));
});

reload.addEventListener('click', function() {
  var json = c.toJSON(allCustomAttr);
  c.clear();
  c.loadFromJSON(json, function() {
    c.renderAll();
  })
});

unGroupbtn.addEventListener('click', function() {
  var activeObject = c.getActiveObject();
  if (activeObject && activeObject.type != "group") {
    return;
  }
  var items = activeObject.getObjects();
  activeObject.destroy();
  c.remove(activeObject);
  for (var i = 0; i < items.length; i++) {
    c.add(items[i]);
  }
  c.renderAll();
  c.loadFromJSON(c.toJSON(allCustomAttr));
});


groupbtn.addEventListener('click', function() {
  if (!c.getActiveGroup) {
    return;
  }
  var activegroup = c.getActiveGroup() || c.getActiveObject();
  var objectsInGroup = activegroup.getObjects();
  var grp = new fabric.Group();
  objectsInGroup.forEach((element, index) => {
    element.clone((clonedElement) => {
      grp.addWithUpdate(clonedElement);
    });
  });
  grp.set({
    top: activegroup.top,
    left: activegroup.left
  })
  c.discardActiveGroup();
  c.deactivateAllWithDispatch();
  objectsInGroup.forEach(function(object) {
    c.remove(object);
  });
  c.add(grp);
  c.renderAll();
});

var rect = new fabric.Rect({
  height: 100,
  width: 100,
  top: 100,
  left: 100,
  fill: 'red'
});

extend(rect, {
  "customSourceType": "rect",
  "id": 123456
})
c.add(rect);

var text = new fabric.IText('this is text', {
  fill: 'green',
  top: 150,
  left: 220,
  fontSize: 30
});

extend(text, {
  "customSourceType": "ITEXT",
  "id": 987654
})

c.add(text);

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<button id="reload">
   Load from json
</button>
<button id="group">
Group
</button>
<button id="ungroup">
UnGroup
</button>
<button id="getJSON">
GEt json
</button>
<canvas id="c" style="border:1px solid"></canvas>

<ol>
  <li>Select both object and group it.</li>
  <li> now select that group. and check in console. </li>
  <li>please check second log.(there are two log placed on selected event.)</li>
  <li>(console) there are objects array in group</li>
  <li>expand rect object (first object of array)</li>
  <li>try to find custom attributes (customSourceType, id) </li>
  <br/>
  <li> above step will perfect. </li>
  <br/>
  <li> Now click on loadFromJson button</li>
  <li> now select that group. and check in console. </li>
  <li>please check second log.(there are two log placed on selected event.)</li>
  <li>(console) there are objects array in group</li>
  <li>expand rect object from that array(first object of array)</li>
  <li>try to find custom attributes (customSourceType, id) </li>
  <li>After loadfromjson there is no custom attributes.</li>
</ol>