Question

我正在使用fabric.js画布在这个应用程序中设计名片设计器应用程序我需要一个管理对象z-index的系统，为此我创建了两个按钮，用于在后面和前面发送选定的对象，它的工作正常但在我的所有设计我有一个背景图像，当我发送一个对象时，所有文本和对象放在它后面发送回BG图像如何可以停止我的意思是我希望BG图像始终在最后位置

preview of application

我正在使用的代码正面发送对象

 var selectedObject;
      canvas.on('object:selected', function(event) {
        selectedObject = event.target;
      });

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

      var sendSelectedObjectToFront = function() {
        canvas.bringToFront(selectedObject);
      }

Answer 1

var canvas = new fabric.Canvas('c');

fabric.Image.fromURL('https://images2.alphacoders.com/147/147320.png', function(img) {
    var oImg = img.set({
        left: 0,
        top: 0,
        angle: 00,
        width: canvas.width,
        height: canvas.height
    });
    canvas.setBackgroundImage(oImg).renderAll();
});

canvas.add(new fabric.Circle({
    left: 50,
    top: 50,
    radius: 50,
    stroke: 'red',
    fill: 'yellow'
}))
canvas.add(new fabric.Rect({
    left: 50,
    top: 50,
    height: 150,
    width:150,
    stroke: 'red',
    fill: 'green'
}))

var sendSelectedObjectBack = function() {
  selectedObject = canvas.getActiveObject();
  if(selectedObject)
  canvas.sendToBack(selectedObject);
  canvas.deactivateAll();
  canvas.renderAll();
}

var sendSelectedObjectToFront = function() {
  selectedObject = canvas.getActiveObject();
  if(selectedObject)
  canvas.bringToFront(selectedObject);
  canvas.deactivateAll();
  canvas.renderAll();
}

canvas{
 border:2px dotted blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>

<button onclick='sendSelectedObjectBack();'>Send back</button>
<button onclick='sendSelectedObjectToFront();'>Bring Front</button>
<canvas id='c' width='400' height='400'></canvas>

使用canvas.setBackgroundImage(obj)设置背景，然后它会一直保持不变。

Answer 2

第一个选项

使用canvas.setBackgroundImage（obj）

第二个选项

如果您不想设置backgroundImage

您可以在发回所选对象后执行此操作，还需要再次发送BG对象。

试试这个。

var sendSelectedObjectBack = function() {
    canvas.sendToBack(selectedObject); //this will send selected object to back.
    // Now loop through all your obj
    canvas.forEachObject(function (obj) {
    // get your background with id or any other property
        if (obj && obj.id.indexOf('BG_') > -1) {
            canvas.bringToBack(obj, true); // this will send your BG always at back
        }
    });
}

fabric.js画布中的图层系统

2 个答案: