Fabric JS - 将对象发送到后面

Question

当你选择一个对象（在我的例子中是一个多边形），它会自动移动到前面。我正在寻找一种方法来防止在z轴上的移动或在选择后将其发送到后面，也许有人可以帮忙吗？

这里有一个简单示例的链接：http://jsfiddle.net/98cuf9b7/1/

当你选择其中一个多边形时，它会被移到前面。我尝试在选择后将它发送到后面，但即使调用了“canvas.sendToBack(object)”函数，它仍然保持在前面。

我示例中的代码：

var canvas  = new fabric.Canvas('c');

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  {x: 200, y: 50},
  {x: 200, y: 100},
  {x: 100, y: 100},
  {x: 100, y: 50} ], {
    left: 300,
    top: 200,
    angle: 0,
    fill: 'blue'
  }
);
canvas.add(pol, pol2);

canvas.on('object:selected', function(event) {
        var object = event.target;
        canvas.sendToBack(object);
        //object.sendToBack();
        console.log("OK");
  });

- Sophie D

---

这不是一个bug。请参见https://dev59.com/Ypjga4cB1Zd3GeqPObgT#38293440。 - Ben

Answer 1

步骤1：您可以使用preserveObjectStacking: true

步骤2：然后使用sendtoback、sendtofront等fabricjs选项，如下所示：

带有前后工作的工作示例

var canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true
});

var pol = new fabric.Polygon([{
  x: 200,
  y: 0
}, {
  x: 250,
  y: 50
}, {
  x: 250,
  y: 100
}, {
  x: 150,
  y: 100
}, {
  x: 150,
  y: 50
}], {
  left: 250,
  top: 150,
  angle: 0,
  fill: 'green'
});

var pol2 = new fabric.Polygon([{
  x: 200,
  y: 50
}, {
  x: 200,
  y: 100
}, {
  x: 100,
  y: 100
}, {
  x: 100,
  y: 50
}], {
  left: 300,
  top: 200,
  angle: 0,
  fill: 'blue'
});
canvas.add(pol, pol2);

var objectToSendBack;

canvas.on("selection:created", function(event){
  objectToSendBack = event.target;
});
canvas.on("selection:updated", function(event){
  objectToSendBack = event.target;
});

var sendSelectedObjectBack = function() {
  canvas.sendToBack(objectToSendBack);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js" integrity="sha512-T9uV3LxV54oKVYSwORGeHdJ1Ti0WcQvDjAaTvMS6+qfrI5ZRzwxfXVzr7fqodTjfZ6wtbreT5A+65ykwbp4DOw==" crossorigin="anonymous"></script>


<canvas id="c" width="500" height="300" style="margin-top:-150px;"></canvas>

<button height="60" style="margin-left:200px;" onclick="sendSelectedObjectBack()"> Send Back </button>

- vijay

---

保留对象堆叠：true 实时进行更改。 :) - Mohamed Raza

Answer 2

这是由于您使用的 Fabric 版本造成的。在代码中，我看到你使用了 version0.9. 这似乎是默认行为，每当选择一个对象时，其 z-index 就会更改，使其处于顶部/前面。尝试使用更新的版本，在其他版本中，如果一个对象在后面，即使选择它，它也会保持在后面。

这里有一个使用较新版本（1.4.0）的演示。在这个演示中，当你选择对象时，它会被向后移动。如果你注释掉发送向后代码，它将保持在前面或后面。

var canvas  = new fabric.Canvas('c');

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  {x: 200, y: 50},
  {x: 200, y: 100},
  {x: 100, y: 100},
  {x: 100, y: 50} ], {
    left: 300,
    top: 200,
    angle: 0,
    fill: 'blue'
  }
);
canvas.add(pol, pol2);

canvas.on('object:selected', function(event) {
        var object = event.target;
        canvas.sendToBack(object);
        //object.sendToBack();
        console.log("Selected");
  });
  

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="c" width="500" height="500"></canvas>

- Manish

---

谢谢您的回复 :)在我的项目中，我正在使用新版本，我创建了一个新版本的fiddle，但它又不起作用了：http://jsfiddle.net/z7koh0h4/1/ 我认为这是一个bug，所以我会报告这个问题。 :) 谢谢 - Sophie D

Answer 3

var activeObj = canvas.getActiveObject();
canvas.sendToBack(activeObj);
canvas.renderAll();

- rstar kumawat

---

目前所写的回答不够清晰，请编辑并添加更多细节以便他人理解其如何回答问题。您可以在帮助中心了解有关如何编写优质答案的更多信息。 - Community