Fabric JS - 将对象发送到后台

Question

当您 select 一个对象（在我的例子中是一个多边形）时，它会自动移到前面。我正在寻找一种方法来防止在 z 轴上移动或在 selection 之后将其向后发送，也许有人可以提供帮助？

下面是一个link的简单例子：http://jsfiddle.net/98cuf9b7/1/

当您select其中一个多边形时，它会移到前面。我试图在 selection 之后向后发送它，但是即使调用了 "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");
  });

Answer 1

好的，这是因为您使用的 Fabric 版本。在 fiddle 中，我可以看到你使用了 version0.9. 所以这似乎是默认行为，每当一个对象被 selected 时，它的 z-index 就会改变这样它在 top/front 上。尝试使用更高版本。在其他版本中，如果一个对象在后面，这个问题就不存在了，即使你 select 它仍然在后面。这是一个稍后 version(1.4.0) 的演示。在这里，每当您 select 对象时，它就会向后移动。如果你注释掉向后发送的代码，如果在前面，它将保留在前面，如果在后面，它将保留在后面。

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>

Answer 2

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

第 2 步：然后使用如下所示的 sendtoback、sendtofront....fabricjs 选项

Working Example with back and front working

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>

Answer 3

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

Fabric JS - 将对象发送到后台

Fabric JS - send Objects to Back

javascript

frontend

fabricjs