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>

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

1 个答案: