如何使用 fabricJS 版本 1.7.22 取消多个 IText 的分组

Question

我正在实现分组和取消分组的功能。

我的分组和取消分组对图像正常工作。 但是当我使用鼠标选择多个 IText 并将其分组时。

分组表现非常好，但是当我取消分组时，当时，

我所有的IText都是透明的。 我们可以选择那个 IText，但只能选择空白框。

fiddle linked below for generate issue : 

https://jsfiddle.net/Mark_1998/71g6enkd/

要重现问题，步骤都在小提琴中。

是否有任何可用于此问题的补丁？

Answer 1

你需要调用 group#destroy。

演示

var grp = document.getElementById('grp')
var ungrp = document.getElementById('ungrp')
var c = document.getElementById('c');
var canvas = new fabric.Canvas(c);
canvas.setHeight(300);
canvas.setWidth(500);
var text = new fabric.IText('this is test', {
  top: 100,
  left: 100,
  fill: 'red',
  fontSize: 40
});
canvas.add(text);
var text1 = new fabric.IText('this is test', {
  top: 150,
  left: 150,
  fill: 'red',
  fontSize: 20
});
canvas.add(text1);
grp.addEventListener('click', makeGroup);
ungrp.addEventListener('click', makeUngroup);
function makeGroup() {
  console.log('make group call');
  if (!canvas.getActiveGroup()) {
    return;
  }
  var activegroup = canvas.getActiveGroup() || canvas.getActiveObject();
  var objectsInGroup = activegroup.getObjects();
  activegroup.clone(function(newgroup) {
    canvas.discardActiveGroup();
    canvas.deactivateAllWithDispatch();
    objectsInGroup.forEach(function(object) {
      canvas.remove(object);
    });
    canvas.add(newgroup);
  });
}
function makeUngroup() {
  var activeObject = canvas.getActiveObject();
  if (activeObject && activeObject.type == "group") {
    var items = activeObject.getObjects();
    activeObject.destroy();
    canvas.remove(activeObject);
    for (var i = 0; i < items.length; i++) {
      canvas.add(items[i]);
    }
    canvas.renderAll.bind(canvas);
  }
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<button id="grp">
Make Group
</button>
<button id="ungrp">
Make UnGroup
</button>
<canvas id="c" style="border: 1px solid"></canvas>