Fabric.js의 Z- 인덱스 제어

Question

fabricjs에서 마우스 아래의 객체가 z- 인덱스의 장면 상단으로 올라간 다음 마우스가 해당 객체를 떠난 후에 다시 되돌아갑니다. Z-index에 대한 정보를 제공합니다. 하나는 object.zindex를 설정할 수 없습니다 (어느 것이 좋을까요). 대신 이전 위치의 객체 목록에 삽입 된 자리 표시 자 객체를 사용하고 있으며 이전 객체는 canvas.insertAt를 사용하여 목록에 있던 위치에 다시 배치됩니다. 그러나 이것은 작동하지 않습니다.

이 상태는 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 이후 Z- 색인 조작하기위한 새로운 방법을 사용할 수 있습니다 :

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

내가이 사용 사례에 대한 도움이된다 생각합니다. 나는 당신의 jsfiddle 업데이트되었습니다 -이 당신이 원하는 희망 :
jsfiddle

Answer 2

을 또한 캔버스에 객체를 추가 한 후 Z- 인덱스를 변경해야합니다. 당신 설치 Z-인덱스에 대한

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

그렇지 않으면 fabricjs 돈`t 관리 :

그래서 코드 의지 등이 보인다.