Fabric.js insertAt работает не так, как ожидалось - PullRequest
Новая
       5

Fabric.js insertAt работает не так, как ожидалось

0 голосов
/ 13 октября 2018

Я хочу сделать две группы объектов в виде слоев с fabric.js.Но хотя я поставил второй с более низким z-индексом, он все еще на вершине.Смотрите пример кода ниже.Что не так? 

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>

1 Ответ

0 голосов
/ 13 октября 2018

Fabric.JS не имеет настоящей функциональности z-index, как вы видите в css.Вместо этого объекты на холсте работают как массив, где индекс каждого объекта определяет, где он находится в порядке наложения.Использование 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>
...