fabric.js畫布中的圖層系統

Question

我在這個應用程序中使用fabric.js canvas設計名片設計器應用程序，我需要一個用於管理對象z-index的系統，為此，我創建了兩個按鈕，用於向后和向前發送所選對象，可以正常工作，但是在我所有的設計中背景圖像，當我發回一個對象時，所有文本和對象都放置在該背景圖像上，它在該BG圖像下發回，這是如何停止的，我的意思是我希望該BG圖像始終位於最后一個位置

申請預覽

我現在使用的代碼前后發送對象

 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)設置背景，然后它將一直保持在后台。

Answer 2

第一選擇

使用canvas.setBackgroundImage（obj）

第二選擇

如果您不想設置backgroundImage

您可以在將選定的對象發送回去之后執行此操作，您需要再次將BG對象發送回去。

嘗試這個。

var sendSelectedObjectBack = function() {
    canvas.sendToBack(selectedObject); //this will send selected object to back.
    // Now loop through all your obj
    canvas.forEachObject(function (obj) {
    // get your background with id or any other property
        if (obj && obj.id.indexOf('BG_') > -1) {
            canvas.bringToBack(obj, true); // this will send your BG always at back
        }
    });
}