Question

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

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

是否有用于分组的补丁程序，因此，每次将我的所有自定义属性添加到组的对象中时。

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

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();
    }

我尝试了一些可能有助于理解问题的方案。（我所有的画布对象都必须包含名为'id'的custom_attribute）

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

2）添加一个图像，然后克隆该图像并将其分组。现在将canvas转换为json。（JSON包含我所有的自定义属性，例如：=>组（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>

从具有自定义属性的json加载对象后，如何在Fabric js 1.7.22版中创建一组对象？

1 个答案: