无法使用 Fabric JS 取消组合

Question

对 FabricJS 来说有点新，但看起来我要么把事情搞砸了，要么无法像我需要的那样取消组合。

在这里创建了一个小提琴：

// Init canvas
var canvas = new fabric.Canvas('c');

// Create array of circles

var circlesCollection = [];

for (i = 0; i < 10; i++) {
  var circle = new fabric.Circle({
    radius: 10,
    fill: 'red',
    left: 25 * i,
    originX: "left"
  });
  circlesCollection.push(circle);
}

// Create group and add the group to the canvas
var circleGroup = new fabric.Group(circlesCollection, {
  left: 100,
  top: 100
});

canvas.add(circleGroup);

function unGroup() {
  //Ungroup and add back to canvas
  var items = circleGroup.getObjects();
  canvas.remove(circleGroup);

  var width = circleGroup.getWidth();
  var height = circleGroup.getHeight();

  for (var i = 0; i < items.length; i++) {
    var left = circleGroup.getLeft() + items[i].getLeft() + (width / 2);
    var top = circleGroup.getTop() + items[i].getTop() + (height / 2);
    items[i].setLeft(left);
    items[i].setTop(top);
    items[i].hasControls = true;
    canvas.add(items[i]);
  }

  canvas.renderAll();
}

canvas {
  border: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<button onclick="unGroup()">Ungroup now</button>
<canvas id="c" width="600" height="600"></canvas>

外部链接：https://jsfiddle.net/WillemStaels/w9j3qwg0/3/

小提琴的作用：

• 创建新的画布 + 初始化 FabricJS
• 添加一个包含 10 个圆形对象的组
• 从组（10 个圆圈）中获取项目并将它们添加到画布中
• 删除组

= 实际上是一个基本的取消分组功能

现在发生的情况是，在没有组的情况下添加回画布后的对象在选择时不显示控件，并且在取消选择后它们在画布上变得不可见。调整大小后（手柄在那里但不可见）似乎解决了问题。

在过去的几个小时里，我一直在为此烦恼，所以欢迎任何反馈或帮助！

Answer 1

你只是缺少group.destroy 当您要删除一个组时，Destroy 会将对象重置为自然画布坐标。

这个 sn-p 也证明了一个小错误，从组中拉出的对象需要手动重置脏属性，而这不应该发生。 这需要修复。

// Init canvas
var canvas = new fabric.Canvas('c');

// Create array of circles

var circlesCollection = [];

for (i = 0; i < 10; i++) {
  var circle = new fabric.Circle({
    radius: 10,
    fill: 'red',
    left: 25 * i,
    originX: "left"
  });
  circlesCollection.push(circle);
}

// Create group and add the group to the canvas
var circleGroup = new fabric.Group(circlesCollection, {
  left: 100,
  top: 100
});

canvas.add(circleGroup);

function unGroup() {
  //Ungroup and add back to canvas
  var items = circleGroup.getObjects();
  circleGroup.destroy();
  canvas.remove(circleGroup);
  items.forEach(function(item) {
    item.set('dirty', true);
  })
  canvas.add.apply(canvas, items);
  canvas.renderAll();
}

canvas {
  border: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<button onclick="unGroup()">Ungroup now</button>
<canvas id="c" width="600" height="600"></canvas>