CODEWITHSUNDEEP
javascriptfabricjs
Sunil Meena
Sunil Meena

Reputation: 541

layer system in fabric.js canvas

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

Upvotes: 2

Views: 3855

Answers (2)

Yogen Darji
Yogen Darji

Reputation: 3300

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

Upvotes: 2

Durga
Durga

Reputation: 15604

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.

Upvotes: 3

Related Questions