CODEWITHSUNDEEP
jquerysortingjquery-uifabricjs
Abu
Abu

Reputation: 33

How to control objects z-index in fabric js using jquery sortable list


How to reorder the layer through sorting the list and if I reorder the layer the list also reorder in fabric.js kindly help me to resolve the issue kindly check the fiddle below. Here I also mentioned the javascript code 

function randomColor(){
  return '#'+Math.floor(Math.random()*16777215).toString(16);
}

// Fabric canvas
var canvas = new fabric.Canvas('c');
var imageSource = "http://fabricjs.com/lib/pug.jpg";

$("#btnCreateCircle").click(function(evt){
  // remove active state of each layer
  $("li").removeClass("actived");
  canvas.deactivateAll();

  // object
  var circle = new fabric.Circle({
    left: 100,
    top: 100,
    radius: 25,
    fill: randomColor(),
    hasRotatingPoint: true
  });
  canvas.add(circle);
  canvas.setActiveObject(circle);
  canvas.renderAll();

  // layer
  var id = canvas.getObjects().length - 1;
  $("#containerLayers").prepend('<li id="'+ id +'" class="ui-state-default actived"><span class="ui-icon ui-icon-arrow-2-n-s"></span> item ' + id + '</li>');
  $("#"+id).click(function(evt){
    if($(this).hasClass("actived")){
      // remove active state of all layers and objects
      $("li").removeClass("actived");
      canvas.deactivateAll();
      canvas.renderAll();            
    }
    else{
      // remove active state of all layers and objects
      $("li").removeClass("actived");
      canvas.deactivateAll();
      canvas.renderAll();
      // activate layer and object      
      $(this).addClass("actived");
      var obj = canvas.item(id);
      canvas.setActiveObject(obj);
      canvas.renderAll();        
    }        
  });    

  circle.on('selected', function() {
    $("li").removeClass("actived");
    $("#"+id).addClass("actived");
  });

});

$("#btnCreateText").click(function(evt){
  // remove active state of each layer
  $("li").removeClass("actived");
  canvas.deactivateAll();

  // object
  var text = new fabric.Text('Text', { 
    left: 100,
    top: 100,
    hasRotatingPoint: true
  });
  canvas.add(text);
  canvas.setActiveObject(text);
  canvas.renderAll();

  // layer
  var id = canvas.getObjects().length - 1;
  $("#containerLayers").prepend('<li id="'+ id +'" class="ui-state-default actived"><span class="ui-icon ui-icon-arrow-2-n-s"></span> item ' + id + '</li>');
  $("#"+id).click(function(evt){
    if($(this).hasClass("actived")){
      // remove active state of all layers and objects
      $("li").removeClass("actived");
      canvas.deactivateAll();
      canvas.renderAll();            
    }
    else{
      // remove active state of all layers and objects
      $("li").removeClass("actived");
      canvas.deactivateAll();
      canvas.renderAll();
      // activate layer and object      
      $(this).addClass("actived");
      var obj = canvas.item(id);
      canvas.setActiveObject(obj);
      canvas.renderAll();        
    }        
  }); 

  text.on('selected', function() {
    $("li").removeClass("actived");
    $("#"+id).addClass("actived");
  });

});

$("#btnCreateImage").click(function(evt){
  // remove active state of each layer
  $("li").removeClass("actived");
  canvas.deactivateAll();

  // object
  fabric.util.loadImage(imageSource, function(img) {
    var obj = new fabric.Image(img);
    obj.set({ 
      left: 100,
      top: 100,
      scaleX: 0.25,
      scaleY: 0.25,
      hasRotationPoint: true
    });
    canvas.add(obj);
    canvas.setActiveObject(obj);
    canvas.renderAll(); 

    // layer
    var id = canvas.getObjects().length - 1;
    $("#containerLayers").prepend('<li id="'+ id +'" class="ui-state-default actived"><span class="ui-icon ui-icon-arrow-2-n-s"></span> item ' + id + '</li>');
    $("#"+id).click(function(evt){
      if($(this).hasClass("actived")){
        // remove active state of all layers and objects
        $("li").removeClass("actived");
        canvas.deactivateAll();
        canvas.renderAll();            
      }
      else{
        // remove active state of all layers and objects
        $("li").removeClass("actived");
        canvas.deactivateAll();
        canvas.renderAll();
        // activate layer and object      
        $(this).addClass("actived");
        var obj = canvas.item(id);
        canvas.setActiveObject(obj);
        canvas.renderAll();        
      }        
    }); 

    obj.on('selected', function() {
      $("li").removeClass("actived");
      $("#"+id).addClass("actived");
    });

  });
});

$("#containerLayers").sortable({
  change: function(event, ui){
    console.log(event, ui);
  }
});
$("#containerLayers").disableSelection();

Fiddle

Upvotes: 3

Views: 4408

Answers (2)

Michał Dopieralski
Michał Dopieralski

Reputation: 450

There are couple ways to change 'z-index' in canvas while using fabricjs.

As Taqi mentioned you can use canvas.moveTo(object,index) method (docs). But there are also canvas.bringToFront(object) and canvas.sendToBack(object). All of these can be used also directly on your object:

circle.moveTo(5);
circle.bringToFront()
circle.sendToBack();

Upvotes: 3

Taqi Mustafa
Taqi Mustafa

Reputation: 80

You need to use the canvas.moveTo(object,index) function to re arrange the objects whenever a JQuery Sortable List is modified.

$("#containerLayers").sortable({
  change: function(event, ui){
    $( "#containerLayers li" ).each(function(index,list){
        //push Object in objectArray whenever an object is added 
        canvas.moveTo(objectArray[$(list).attr('id')],index);
    });
    canvas.renderAll();
  }
});

Refer this fiddle for better understanding https://jsfiddle.net/taqimustafa/peLcju2h/5/

Upvotes: 3

Related Questions