Question

我们首先放置object1，然后放入object2，最后将object3放在画布上。这意味着object1位于底部，object3位于顶部。

当我们想要更改object2网址或对其执行操作时，我们将其删除并在之后添加新的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>

不更改对象顺序

1 个答案: