Question

我目前正在使用令人敬畏的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);
        });

Answer 1

方法1

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

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

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

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

方法1（优选）

另一种选择是保留一个画布并将自定义属性添加到对象“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();
   }

});

将Canvas实例带到前面

1 个答案:

方法1

方法1（优选）