javascript - Fabric.js Canvas 中的图层系统

Question

我正在使用fabric.js Canvas 设计名片设计器应用程序，在此应用程序中我需要一个用于管理对象z索引的系统，为此我创建了两个按钮用于在后面和前面发送选定的对象，它工作正常，但在我的所有设计我有一个背景图像，当我发回一个对象时，所有文本和对象都放置在该背景图像上，它会在该 BG 图像下发回，如何阻止我的意思是我希望该 BG 图像始终处于最后位置

preview of application

我现在使用的代码在前面和后面发送对象

 var selectedObject;
      canvas.on('object:selected', function(event) {
        selectedObject = event.target;
      });

      var sendSelectedObjectBack = function() {
        canvas.sendToBack(selectedObject);
      }

      var sendSelectedObjectToFront = function() {
        canvas.bringToFront(selectedObject);
      }

Answer 1

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://images2.alphacoders.com/147/147320.png', function(img) {
    var oImg = img.set({
        left: 0,
        top: 0,
        angle: 00,
        width: canvas.width,
        height: canvas.height
    });
    canvas.setBackgroundImage(oImg).renderAll();
});

canvas.add(new fabric.Circle({
    left: 50,
    top: 50,
    radius: 50,
    stroke: 'red',
    fill: 'yellow'
}))
canvas.add(new fabric.Rect({
    left: 50,
    top: 50,
    height: 150,
    width:150,
    stroke: 'red',
    fill: 'green'
}))

var sendSelectedObjectBack = function() {
  selectedObject = canvas.getActiveObject();
  if(selectedObject)
  canvas.sendToBack(selectedObject);
  canvas.deactivateAll();
  canvas.renderAll();
}

var sendSelectedObjectToFront = function() {
  selectedObject = canvas.getActiveObject();
  if(selectedObject)
  canvas.bringToFront(selectedObject);
  canvas.deactivateAll();
  canvas.renderAll();
}

canvas{
 border:2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>

<button onclick='sendSelectedObjectBack();'>Send back</button>
<button onclick='sendSelectedObjectToFront();'>Bring Front</button>
<canvas id='c' width='400' height='400'></canvas>

使用canvas.setBackgroundImage(obj)设置背景，然后它会一直保持在后面。