fabric.js画布中的图层系统

Question

I am designing business card designer application with fabric.js canvas in this application i need a system for managing objects z-index and for that i created two buttons for sending selected object in back and front its working fine but in all my designs i have a background image on which all text and objects placed when i send a object back it send back under that BG image how can stop that i mean i want that BG image to always in last position

preview of application

Code i am using now to send object in front and back

 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> 

Set your background using canvas.setBackgroundImage(obj) , then it will stay ion back all the time.

Answer 2

First Option

Use canvas.setBackgroundImage(obj)

Second Option

If you don't want to set backgroundImage

You can do it after you send back your selected object, you need to again send your BG object to back.

Try this.

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
        }
    });
}