如何使用jquery可排序列表控制fabric js中的对象z-index

Question

如何通过排序列表来重新排序图层，如果我重新排序图层的话，列表也会在fabric.js中重新排序。请帮助我解决这个问题，请检查下面的fiddle。这里我还提到了javascript代码

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

Answer 1

每当修改JQuery可排序列表时，您需要使用canvas.moveTo（object，index）函数来重新排列对象。

$("#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();
  }
});

参考这把小提琴以更好地理解https://jsfiddle.net/taqimustafa/peLcju2h/5/

Answer 2

在使用fabricjs时，有几种方法可以更改画布中的"z-index"。

正如塔奇所提到的，你可以使用canvas.moveTo（object，index）方法（docs）。但也有canvas.bringToFront（object）和canvas.sendToBack（object）。所有这些都可以直接用于您的对象：

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