Edit Question - KnowledgeHub

Title Body

In fabricjs, I want to create a scene in which the object under the mouse rises to the top of the scene in z-index, then once the mouse leaves that object, it goes back to the z-index where it came from. One cannot set object.zindex (which would be nice). Instead, I'm using a placeholder object which is put into the object list at the old position, and then the old object is put back in the position where it was in the list using canvas.insertAt. However this is not working. See http://jsfiddle.net/rFSEV/ for the status of this. 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, r

Tags (comma-separated) Cancel