Get/Set zindex of an object?

[Dino4674]

I see that when you add new object(rect, circle...) to canvas it appears on top of the previous one. And it looks like it's zindex is greater for new elements. But

object.get('zindex')

gives me undefined.

I would like to to be able to read object's zindex and change it.

I saw this but this is not helping me since I have to compare object's zindexes.

[kangax]

There's no way to retrieve z-index of an object via get('zindex'). However, there are 4 methods for zIndex manipulation of objects: canvas.sendBackwards, canvas.sendToBack, canvas.bringForward, and canvas.bringToFront.

You can also do something like canvas.getObjects().indexOf(myObject) to get the (z-) index of object on canvas.

[Dino4674]

thx, that is what I needed!

[jobnet2008]

Example in https://www.lulufrenchie.com/fr/lab
I seek to put the edges of an image to the frame eyeglasses keeping the image on the inside, I search with the z-index proprieté, unfortunately I have not found a solution. anyone can help me?
here is my code insertion image
$("#image_g").click(function(){

      $("#image_gche").load("im_gauche.php", function() {
           $(this).dialog({

             height: 'auto',
             width:'30%',
             modal: true,

             overlay: {

                     backgroundColor: '#000',
                     opacity: 0.5
             },
             buttons: {
    "Inserer": function() {
        inser_valide(imageObj1);},  
    "Retour": function() {
      $( this ).dialog( "close" );
    }
  } 
        });$("#ahrefg").click(function(){$("#image_gche").dialog( "close" );}); 
    });});

function inser_valide(imageObj1){

if($("#pitcos").html()!=""){
imageObj1.src=$("#pitcos").html();

    }
    else
    imageObj1.src=$("#imagews").html();

imageObj1.onload = function() {
oImg1=imageObj1.src;

fabric.Image.fromURL(oImg1, function(oImg1) {
// scale image down, and flip it, before adding it onto canvas
// oImg1.set({left:canvas1.width / 2+60,top:canvas1.height/2+80});
//oImg1.set({width:240,height:90,angle:180,borderColor:"black"});

oImg1.set({left:80,top:15});
oImg1.set({width:w,height:h,angle:0,zIndex:100});
oImg1.borderSize=100;
oImg1.borderColor = 'black';

        oImg1.cornerColor = 'black';
        oImg1.cornerSize = 20;

        alert(canvas1.getObjects().indexOf(oImg1.border));

var props="";
for (prop in oImg1){ props+= prop + " => " +oImg1[prop] + "\n"; }
//alert(props);
oImg1.scale(3).setFlipY(false);
oImg1.scale(2).setFlipX(false);
oImg1.on('selected', function() {
console.log('selected a rectangle');
});

canvas1.add(oImg1);

});
};

   $( "#image_gche" ).dialog( "close" );


    }

[StephaneBischoff]

Getting the z-Index via canvas.getObjects().indexOf(myObject) is nice. But what about setting the z-index explicitly? Can someone add canvas.setIndex(myObject, 3) or something similiar?

[filiperoberto]

I extended fabric objects to get zindex and addToPosition:

fabric.Object.prototype.getZIndex = function() {
    return this.canvas.getObjects().indexOf(this);
}

fabric.Canvas.prototype.addToPosition = function(object,position) {
    this.add(object);
    while(object.getZIndex() > position) {
        this.sendBackwards(object);
    }
}

[bcruddy]

@StephaneBischoff @filiperoberto fabric.Object has a built in moveTo method.