javascript - 无法使用 Fabric JS 取消分组

Question

对 FabricJS 有点陌生，但看起来我要么把事情搞砸了，要么不可能像我需要的那样取消分组。

在这里创建了一个 fiddle :

// 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/

fiddle 的作用:

• 创建新 Canvas +初始化FabricJS
• 添加包含 10 个圆形对象的组
• 从组(10 个圆圈)中获取项目并将其添加到 Canvas
• 删除群组

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

现在发生的情况是，在没有组的情况下添加回 Canvas 后的对象在选择时不会显示控件，并且在取消选择后它们在 Canvas 上变得不可见。调整大小后( handle 存在但不可见)，似乎解决了问题。

在过去的几个小时里，我一直在为这个问题伤透脑筋，所以欢迎任何反馈或帮助!

Answer 1

您只缺少group.destroy 当您要删除组时，销毁会将对象重置为自然 Canvas 坐标。

这段代码还证明了一个小错误，从组中取出的对象需要手动重置脏属性，但这不应该发生。 这需要修复。

// 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>