Question

我想使用fabric.js将两组对象作为图层。但是，尽管我将第二个Z-index设置为较低的索引，但它仍处于首位。请参见下面的代码示例。怎么了？

var canvas = new fabric.StaticCanvas('canvas');

var render_items = function() {
  var rect1 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    left: 25,
    top: 10,
    width: 50,
    height: 50,
    fill: 'red'
  });
  var layerA = new fabric.Group([rect1], {
    originX: 'left',
    originY: 'top'
  });
  canvas.insertAt(layerA, 100);
  var rect2 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    left: 30,
    top: 20,
    width: 50,
    height: 50,
    fill: 'blue'
  });
  var layerB = new fabric.Group([rect2], {
    originX: 'left',
    originY: 'top'
  });
  canvas.insertAt(layerB, 50);
}();

#canvas {
	border:1px solid #000000;	
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

Answer 1

Fabric.JS并没有真正的css真正的z-index功能。取而代之的是，画布上的对象就像一个数组一样工作，其中每个对象的索引确定了它在堆叠顺序中的位置。使用canvas.insertAt()可以指定一个特定的索引以将对象插入数组，而数组的长度始终由画布中有多少个对象确定。

因此，将对象插入索引为0的位置将使数组中的其他对象移位，以便在堆叠顺序的底部显示新对象。

var canvas = new fabric.StaticCanvas('canvas');

var render_items = function() {
  var rect1 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    left: 25,
    top: 10,
    width: 50,
    height: 50,
    fill: 'red'
  });
  var layerA = new fabric.Group([rect1], {
    originX: 'left',
    originY: 'top'
  });
  canvas.insertAt(layerA, 0);
  var rect2 = new fabric.Rect({
    originX: 'left',
    originY: 'top',
    left: 30,
    top: 20,
    width: 50,
    height: 50,
    fill: 'blue'
  });
  var layerB = new fabric.Group([rect2], {
    originX: 'left',
    originY: 'top'
  });
  canvas.insertAt(layerB, 0);
}();

#canvas {
	border:1px solid #000000;	
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.5/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>

Fabric.js insertAt无法按预期工作

1 个答案: