CODEWITHSUNDEEP
javascripthtmlfabricjs
s_dev
s_dev

Reputation: 255

fabric.js moving an object underneath another object

I have two layers(0,1). 0 being the bottom image on a canvas, and 1 the top. Layer 0 is a human body template, layer 1 are some eyes. I want to be able to move the bottom most layer(the body layer), without moving the top layer or covering up the top layer. Basically, have the eyes sit on the body and are visible, but able to move the body image around. Ive been able to achieve most of this with:

canvas.item(0).selectable = true;
canvas.item(0).evented = true;
canvas.item(1).selectable = false;
canvas.item(1).evented = false;

However, when i then start to drag layer 0 around(the human body layer), it brings that layer to the top and covers the eyes, even though when I print the array of objects, it still says the body layer is index 0. What am i missing? is this even possible? Moving a lower layer underneath higher visible layers?

This is how I'm adding the layers originally:

    fabric.Image.fromURL(imgString, function(oImg) {

        oImg.scale(0.4);
        canvas.centerObject(oImg);
        canvas.add(oImg);

        canvas.renderAll();


    });

Upvotes: 4

Views: 2013

Answers (1)

s_dev
s_dev

Reputation: 255

Simply adding 

preserveObjectStacking: true

to canvas initializer fixed this. 

var canvas = new fabric.Canvas('mainCanvas',{
        preserveObjectStacking: true
    });

Upvotes: 2

Related Questions