Question

FabricJS的一些新功能，但看起来我要么严重搞砸了，要么就像我需要它一样无法解开组合。

在这里创建一个小提琴：

＆＃13;

// 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();
}

＆＃13;

canvas {
  border: 1px solid #999;
}

＆＃13;

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

＆＃13;

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

小提琴的作用：

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

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

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

在过去的几个小时里，我对此深有体会，所以欢迎任何反馈或帮助！

Answer 1

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

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

＆＃13;

// 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();
}

＆＃13;

canvas {
  border: 1px solid #999;
}

＆＃13;

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

＆＃13;

无法与Fabric JS

1 个答案: