关于fabricjs的组功能的困惑

Question

我最近一直在尝试使用 fabricjs。我正在尝试在概念上创建类似于 krita/gimp 之类的光栅编辑器的图层组结构（层次结构）。换句话说，组内可能有组。从其他几个问题看来，这应该得到支持，但由于两种看似不一致的行为，我感到困惑。如果有人能打破我所做的错误假设，我将不胜感激。

-按组定位项目。创建简单的层次结构后，我的组的相对位置似乎没有意义（父组的定位似乎不适用）https://jsfiddle.net/od259pct/3/

var canvas = new fabric.Canvas("t2", {
         // preserveObjectStacking : true
      });
      canvas.setHeight(130);
      canvas.setWidth(130);
      var layers = {};
      var layer_groups = {};

var rect1 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'red'

})

var rect2 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'yellow'

})

// contains groups 2 and 3
// modifying "top" and "left" seems to have no effect?
var group1 = new fabric.Group([],{
'top':50,
  'left':20,

})

//will contain rect1 (red)
var group2 = new fabric.Group([],{
'top':0,
  'left':0,

})

// will contain rect2 (yellow)
var group3 = new fabric.Group([],{
'top':0,
  'left':0,
  })


group1.addWithUpdate(group2)
group2.addWithUpdate(rect1)
canvas.add(group1)
group1.addWithUpdate(group3)
group3.addWithUpdate(rect2)

-Z 组的索引。我看到多个答案建议使用 .moveTo() 或 group.bringForward() 但是，这些似乎都没有对组内的组产生任何影响。其次，从未解释过这些函数中使用的索引值对于整个画布是绝对的还是仅在该组中是绝对的。 https://jsfiddle.net/od259pct/4/

var canvas = new fabric.Canvas("t2", {
     // preserveObjectStacking : true
  });
  canvas.setHeight(130);
  canvas.setWidth(130);
  var layers = {};
  var layer_groups = {};

var rect1 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'red'

})

var rect2 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'yellow'

})

// contains groups 2 and 3
var group1 = new fabric.Group([],{
'top':0,
  'left':0,
  'width':30,
  'height':30,
})

//will contain rect1 (red)
var group2 = new fabric.Group([],{
'top':0,
  'left':0,
  'width':30,
  'height':30,
})

// will contain rect2 (yellow)
var group3 = new fabric.Group([],{
'top':0,
  'left':0,
  'width':30,
  'height':30,
})


group1.add(group2)
group2.add(rect1)
canvas.add(group1)
group1.add(group3)
group3.add(rect2)

// none of these seem to work (trying to move the yellow rect group under the red rect group)
group1.sendBackwards(group3)
canvas.sendBackwards(group3)

// nor these
group1.bringForwards(group2)
canvas.bringForwards(group2)

Answer 1

group#addWithUpdate 将更新尺寸和位置。添加到组时只需调用add，添加对象后调用group.addWithUpdate()更新维度。

演示

var canvas = new fabric.Canvas("t2", {
  // preserveObjectStacking : true,
  width: 130,
  height:130
});

var rect1 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'red'
})

var rect2 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'yellow'
})

// contains groups 2 and 3
// modifying "top" and "left" seems to have no effect?
var group1 = new fabric.Group([], {
  'top': 50,
  'left': 20,
})

//will contain rect1 (red)
var group2 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})

// will contain rect2 (yellow)
var group3 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})
canvas.add(group1)

group1.add(group2)
group2.addWithUpdate(rect1)

group1.add(group3)
group3.addWithUpdate(rect2)
group1.addWithUpdate()

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<div id="t2-cont" >
  <canvas id="t2" style="border:black solid 2px;"></canvas>
</div>

并更改对象在分组对象上调用moveTo 的位置。

演示

const canvas = new fabric.Canvas("t2", {
  // preserveObjectStacking : true,
  width: 130,
  height:130
});

const rect1 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'red'
})

const rect2 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'yellow'
})

// contains groups 2 and 3
// modifying "top" and "left" seems to have no effect?
const group1 = new fabric.Group([], {
  'top': 50,
  'left': 20,
})

//will contain rect1 (red)
const group2 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})

// will contain rect2 (yellow)
const group3 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})
canvas.add(group1)

group1.add(group2)
group2.addWithUpdate(rect1)

group1.add(group3)
group3.addWithUpdate(rect2)
group1.addWithUpdate()

setTimeout(()=> {
  group2.moveTo(1);
  group1.addWithUpdate();
  canvas.requestRenderAll();
}, 1000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<div id="t2-cont" >
  <canvas id="t2" style="border:black solid 2px;"></canvas>
</div>