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

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

引用这个 fiddle 以更好地理解 https://jsfiddle.net/taqimustafa/peLcju2h/5/