将 Canvas 实例置于最前面答案

【问题标题】：Bring Canvas Instance to Front将 Canvas 实例置于最前面
【发布时间】：2015-05-03 08:38:43
【问题描述】：

我目前正在使用很棒的库 Fabric.js，到目前为止，它已经满足了我的所有需求。我正在尝试通过添加新的 fabric.Canvas 实例来创建一个分层系统，当然每个实例都有自己的对象/属性。

我从 Kangax 那里得到了这个想法： https://twitter.com/fabricjs/status/344822078228283392

我在这些层（画布实例）之间切换时遇到问题。

例如，我如何将一个带到前面？

        // Create two instances of fabric.Cavnas
        var canvas1 = new fabric.Canvas('canvas');
        var canvas2 = new fabric.Canvas('canvas');


        // On button click, bring canvas 2 to the front
        $( "#switchbutton" ).click(function() {

            // Attempts:

            //fabric.Canvas.bringToFront(canvas2);
            //fabric.Object.opacity(0);
            fabric.Object.bringToFront(canvas2);
            //canvas1.bringToFront(canvas2);
        });

【问题讨论】：

标签： javascript fabricjs

【解决方案1】：

方法一

据我了解，您不能这样做。您正试图将一个对象放在画布的前面。您需要更改画布的 z-index 以将其置于前面

基本上你需要有许多不同的画布元素并初始化你有多少层的fabricjs。因此，对于每个新层，您都需要创建新的 canvas 元素并初始化 fabricjs

var canvas2 = new fabric.Canvas('canvas2');
var canvas3 = new fabric.Canvas('canvas3');

然后你将不得不跟踪你的画布图层并调整你的图层画布和上部画布的 z-index

方法一（首选）

另一种选择是保留一个画布并将自定义属性添加到您的对象“layerId”。所以当你创建一个对象时：

canvas.add(new fabric.Circle({ layerId: activeLayerId, radius: 30, fill: '#f55', top: 100, left: 100 }));

当您切换图层时，您只需禁用其他图层对象

canvas.forEachObject(function(obj) {
   obj.selectable = obj.layerId == activeLayerId ? true : false;
});

或者如果你想把对象带到最前面

canvas.forEachObject(function(obj) {
   if(obj.layerId == activeLayerId) {
       obj.bringForward();
   }

});

【讨论】：