向fabric.js組添加路徑是反轉位置或z-index？

Question

我想通過ID在一個組中添加路徑。但它似乎顛倒了路徑的位置或z-索引 - 就像[紅色，藍色，綠色]變成[綠色，藍色，紅色]一樣。我如何以正確的方式做到這一點？

var id_no; 
var objList=[]; 
if (!id_no) { id_no=1; } 

canvas.on('path:created',function(e) { 
    e.path.id=id_no; 
    objList.push(id_no); 
    id_no++; 
}); 

$("#path-group").on("click", function() { 
    var group = new fabric.Group(); 
    canvas.forEachObject(function(o) { 
     if (o.id > 0) { 
      group.addWithUpdate(o); 
      canvas.remove(o); 
     } 
    }); 
    canvas.setActiveObject(group); 
    canvas.add(group); 
    }); 

Answer 1

我想你只是在運行數組時從循環中移除數組的問題。當你這樣做時，索引開始改變，因爲你在數組上循環，結果是一些奇怪的行爲。

因此，下面的解決方案的主要部分僅僅是獲取不僅僅是對象的內部結構列表的引用的對象列表，如果您從中刪除了某些對象，這些對象將發生變化。

window.canvas; 
 

 
$(function() { 
 

 
    canvas = window._canvas = new fabric.Canvas('canvas'); 
 
    canvas.backgroundColor = '#efefef'; 
 
    canvas.isDrawingMode= true; 
 
    canvas.freeDrawingBrush.color = "purple"; 
 
    canvas.freeDrawingBrush.width = 10; 
 
    canvas.renderAll(); 
 

 
document.getElementById('colorpicker').addEventListener('click', function (e) { 
 
     canvas.freeDrawingBrush.color = e.target.value; 
 
    }); 
 

 

 
var id_no; 
 
var objList=[]; 
 
if (!id_no) { id_no=0; } 
 

 
canvas.on('path:created',function(e) { 
 
    id_no++; 
 
    e.path.id=id_no; 
 
    objList.push(id_no); 
 
    $("#log").append(id_no+' '); 
 
}); 
 

 
document.getElementById('path-group').addEventListener('click', function (e) { 
 
    $("#log").append(' -> '); 
 
    var allObjects = canvas.getObjects().slice(); 
 
    
 
    var someObjects = allObjects.filter(o => { 
 
     return o.id >= id_no-1 
 
    }) 
 
    
 
    someObjects.forEach(o => { 
 
    \t canvas.remove(o); 
 
    }); 
 
    var group = new fabric.Group(someObjects); 
 
     
 
    
 
    canvas.add(group); 
 
    canvas.setActiveObject(group); 
 
    
 
    canvas.renderAll(); 
 
    canvas.isDrawingMode= false; 
 
    }); 
 

 
    });

.canvas-wrapper { 
 
    margin-botom: 30px; 
 
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" width="400" height="400" class="canvas"></canvas> 
 

 
<!-- 
 
<select name="colors" id="colorpick"> 
 
    <option value="#FFFF00">Yellow</option> 
 
    <option value="#000000">Black</option> 
 
    <option value="#FF0000">Red</option> 
 
</select> 
 
--> 
 

 
<div id= "colorpicker"> 
 
<button id= "yellow" value= "#FFFF00">yellow</button> 
 
<button id= "black" value= "#000000">black</button> 
 
</div> 
 
<button id="path-group">Group</button> 
 
<p>Event Log: </p> 
 
<div id="log"></div>