jqueryソート可能リストを使用してファブリックj内のオブジェクトZ-インデックスを制御する方法

Question

リストを並べ替える方法とリストを並べ替える場合は、リストもfabric.jsで並べ替えて親切に問題を解決してください下のフィドルをチェックしてください。ここで私はまた、あなたはjQueryのソート可能なリストが変更されるたびに再オブジェクトを配置するcanvas.moveTo（オブジェクト、インデックス）機能を使用する必要が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

を述べました。

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

はfabricjsを使用しながら、キャンバスに「Zインデックス」を変更するにはいくつかの方法があります https://jsfiddle.net/taqimustafa/peLcju2h/5/

Answer 2

より良く理解するために、このフィドルを参照してください。

Taqiが述べたように、canvas.moveTo（オブジェクト、インデックス）メソッド（docs）を使用できます。しかし、canvas.bringToFront(object)とcanvas.sendToBack(object)もあります。これらのすべてはあなたのオブジェクトでも直接使用できます：

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