javascript - 更改对象顺序

Question

我们首先将对象1放置在 Canvas 上，然后放置对象2，最后将对象3放置在 Canvas 上。这意味着object1在底部，object3在顶部。

当我们想要更改 object2 url 或对其执行某些操作时，我们将其删除并在后面添加新的 object2。

但是现在object2 位于顶部。我知道一些方法，如 sendToBack()、moveTo()、....等，可以更改 object2 的顺序。

没有关于修复对象顺序的线索。是否有某种方法已经存在或其他声明可以应用？如果不是，我们是否只能在更改对象层后应用上述方法一次又一次地更改它们的顺序？

谢谢。

Answer 1

使用insertAt()在给定索引处插入对象。

演示

var canvas = new fabric.Canvas('c');
var rect1 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 10,
  top: 10,
  fill: 'red',
});
var rect2 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 30,
  top: 30,
  fill: 'green',
});
var rect3 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 50,
  top: 50,
  fill: 'black',
});
var rect4 = new fabric.Rect({
  width: 100,
  height: 100,
  left: 30,
  top: 30,
  fill: 'yellow',
});
canvas.add(rect1,rect2,rect3);
function alter(){
 var index = canvas.getObjects().indexOf(rect2);
 //canvas.remove(rect2);
 canvas.insertAt(rect4, index,true);
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="alter()">Alter</button>
<canvas id="c" width="600" height="600"></canvas>