组中的对象不可选择答案

【问题标题】：Objects in groups are not selectable组中的对象不可选择
【发布时间】：2013-08-21 10:19:13
【问题描述】：

目前我尝试创建一个包含几个fabric.Circle 的fabric.Group。每个圆圈都应该是可选择和可拖动的。

默认情况下可以选择直接添加到画布的对象。但是当我将圈子添加到组时，它们是不可选的。

只有当我将圆圈添加到组和到画布时，我才能使它们可选。但这在我看来有点混乱。我的意思是...我不需要将一个组的孩子另外添加到画布上以使它们绘制，但我需要将它们另外添加到画布上才能使选择起作用？

这种行为是有意的，是我做错了什么，还是这是一个错误？

jQuery(function() {
   var canvas  = new fabric.Canvas('playground');

   // First the selectable circle:
   var singleCirlce = new fabric.Circle({top: 100, left: 100, radius: 30, fill : 'red'});
   canvas.add(singleCirlce); 

   //second the circle in a group that is not selectable:
   var group = new fabric.Group();
   var groupedCircle = new fabric.Circle({top: 200, left: 200, radius: 30, fill : 'blue'});
   group.add(groupedCircle);
   canvas.add(group);
});

【问题讨论】：

这是设计使然。该组本身就是一个实体。它与任何其他对象的行为方式相同，这就是为什么它可以被选择、缩放、移动、旋转等。如果您需要单独处理对象，您应该将它们单独添加到画布中。为什么需要组？
我想创建一个场景图，其中组在图中充当节点，对象在图中充当叶子。或者你也可以说，我希望 Group 和 Object 成为复合模式的一部分。
例如：我想创建一个 ButtonBar，它由一个 Rect 作为背景和 3 个圆形组成。 Circles 的行为应该像 Buttons 并且应该是可点击的。 Circles 和 Backgroud 是组的子项，因此可以移动、缩放或其他方式完整的 ButtonBar。
我明白你的意思。此功能被标记为可能的功能 — github.com/kangax/fabric.js/issues/485
你需要使用addWithUpdate;它可能只是没有更新维度（从一开始就是 0/0）

标签： fabricjs

【解决方案1】：

您可能想要做的是：创建分组元素的未分组版本，例如：

objects = {...};
canvas.add.apply(canvas, objects);
canvas.renderAll();

每个对象都有一个共同的groupId，听听：

canvas.on('object:moving', function() {...});

如果任何对象被移动，则相应地移动该groupId 中的所有对象。

note:这只是一个理论，我还没有实现它，我不确定如果同时选择多个对象会如何反应。

【讨论】：