Fabric.js में नियंत्रण जेड-इंडेक्स

Question

कपड़े में, मैं एक दृश्य बनाना चाहता हूं जिसमें माउस के नीचे ऑब्जेक्ट जेड-इंडेक्स में दृश्य के शीर्ष पर उगता है, फिर एक बार जब माउस उस ऑब्जेक्ट को छोड़ देता है, तो यह वापस जाता है जेड-इंडेक्स में जहां से आया था। कोई object.zindex (जो अच्छा होगा) सेट नहीं कर सकता है। इसके बजाए, मैं प्लेसहोल्डर ऑब्जेक्ट का उपयोग कर रहा हूं जिसे पुरानी स्थिति में ऑब्जेक्ट सूची में रखा गया है, और फिर पुरानी ऑब्जेक्ट को उस स्थिति में वापस रखा जाता है जहां यह कैनवास.इनर्टएट का उपयोग कर सूची में था। हालांकि यह काम नहीं कर रहा है।

इस स्थिति के लिए http://jsfiddle.net/rFSEV/ देखें।

var canvasS = new fabric.Canvas('canvasS', { renderOnAddition: false, hoverCursor: 'pointer', selection: false }); 
var bars = {}; //storage for bars (bar number indexed by group object) 
var selectedBar = null; //selected bar (group object) 
var placeholder = new fabric.Text("XXXXX", { fontSize: 12 }); 

//pass null or a bar 
function selectBar(bar) { 
    if (selectedBar) { 
     //remove the old topmost bar and put it back in the right zindex 
     //PROBLEM: It doesn't go back; it stays at the same zindex 
     selectedBar.remove(); 
     canvasS.insertAt(selectedBar, selectedBar.XZIndex, true); 
     selectedBar = null; 
     } 
    if (bar) { 
     //put a placeholder object ("XXX" for now) in the position 
     //where the bar was, and put the bar in the top position 
     //so it shows topmost 
     selectedBar = bar; 
     canvasS.insertAt(placeholder, selectedBar.XZIndex, true); 
     canvasS.add(bar); 
     canvasS.renderAll(); 
     } 
    } 

canvasS.on({ 
    'mouse:move': function(e) { 
     //hook up dynamic zorder 
     if (!e.target) return; 
     if (bars[e.target]) 
      selectBar(e.target); 
     else 
      selectBar(null); 
     }, 
    }); 

var objcount = canvasS.getObjects().length; 

//create bars 
for (var i = 0; i < 20; ++i) { 
    var rect = new fabric.Rect({ 
     left: 0, 
     top: 0, 
     rx: 3, 
     ry: 3, 
     stroke: 'red', 
     width: 200, 
     height: 25 
    }); 
    rect.setGradientFill({ 
     x1: 0, 
     y1: 0, 
     x2: 0, 
     y2: rect.height, 
     colorStops: { 
     0: '#080', 
     1: '#fff' 
     } 
    });  
    var text = new fabric.Text("Bar number " + (i+1), { 
     fontSize: 12 
    }); 
    var group = new fabric.Group([ rect, text ], { 
     left: i + 101, 
     top: i * 4 + 26 
    }); 
    group.hasControls = group.hasBorders = false; 

    //our properties (not part of fabric) 
    group.XBar = rect; 
    group.XZIndex = objcount++; 

    canvasS.add(group); 
    bars[group] = i; 
    } 
canvasS.renderAll(); 

Answer 1

fabric.js संस्करण 1.1.4 के बाद से zindex हेरफेर के लिए एक नई विधि उपलब्ध है:

canvas.moveTo(object, index); 
object.moveTo(index); 

मुझे लगता है कि यह आपके उपयोग के मामले के लिए उपयोगी है। मैं अपने jsfiddle नवीनीकृत किया है - मैं उम्मीद है कि इस आप क्या चाहते है:
jsfiddle

Answer 2

इसके अलावा, आप कैनवास पर आपत्ति जोड़ने के बाद z- सूचकांक बदल सुनिश्चित करें। z-अनुक्रमित आप स्थापना के बारे में

canvas.add(object); 
canvas.moveTo(object, index); 

अन्यथा fabricjs डॉन 't देखभाल:

तो कोड इच्छा की तरह दिखता है।