如何使用 fabricJS 版本 1.7.22 取消组合多个 IText？

Question

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

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

分组执行得很好，但是当我取消那个组的分组时，

我所有的 IText 都是透明的。我们可以 select IText，但只有空白框。

fiddle linked below for generate issue :

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

要重现问题，步骤在 fiddle。

这个问题有补丁吗？

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>

如何使用 fabricJS 版本 1.7.22 取消组合多个 IText？

How to ungroup multiple IText using fabricJS version 1.7.22?

javascript

fabricjs