Confusion about group capabilities of fabricjs

问题

I have been experimenting with fabricjs lately. I am attempting to create a group structure (hierarchy) of layers similar to a raster editor like krita/gimp, conceptually. In other words, there may be groups inside of groups. From a few other questions it appears that this should be supported, but I am confused due to two seemingly inconsistent behaviors. I would appreciate it if someone could break down what assumptions I am making incorrectly.

-Positioning of items in groups. After creating a simple hierarchy the relative positions of my groups do not seem to make sense (positioning of parent group does not seem to apply) 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-index of groups. I see multiple answers proposing either using .moveTo() or group.bringForward() However, neither of these seem to have any effect on groups inside groups. Secondly, it is never explained whether the index values that are used in these functions are absolute for the entire canvas or just within that group. 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)

回答1:

group#addWithUpdate will update dimension and position. Just call add while adding to group, after adding the objects call group.addWithUpdate() to update the dimension.

DEMO

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>

And to change the positions of object call moveTo on grouped object.

DEMO

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>

来源：https://stackoverflow.com/questions/58565474/confusion-about-group-capabilities-of-fabricjs

标签

javascript

fabricjs