fabric.js 画布中的图层系统答案

【问题标题】：layer system in fabric.js canvasfabric.js 画布中的图层系统
【发布时间】：2017-08-19 15:14:29
【问题描述】：

我正在这个应用程序中使用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);
      }

【问题讨论】：

标签： javascript fabricjs

【解决方案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) 设置您的背景，然后它将一直保持离子状态。

【讨论】：

【解决方案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
        }
    });
}

【讨论】：