问无法取消对织物JS的分组
EN

Stack Overflow用户

提问于 2017-09-06 05:33:26

回答 1查看 1.2K关注 0票数 2

对于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做了什么：

创建新画布+ init FabricJS
添加具有10个圆圈对象的组。
获取组(10个圆圈)中的项，并将它们添加到画布中。
移除组

=实际上是一个基本的非分组函数

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

在过去的几个小时里，我一直在为这件事绞尽脑汁，所以任何反馈或帮助都将受到欢迎！

javascript

fabricjs

云+校园专区

助力在校大学生快速入门云计算，畅游云端

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-09-06 06:08:29

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

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

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