javascript - 添加路径到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

我认为您只是遇到了在从数组中删除内容时循环数组的问题。当你这样做时，当你循环数组时索引开始改变，结果是一些奇怪的行为。

因此，下面的解决方案的主要部分 id 只是获取一个对象列表，这些对象不仅仅是对对象内部结构列表的引用，如果您从中删除内容，这些对象列表也会发生变化。

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 => {
    	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>