Fabric.js中的画布对象分层

Layering canvas objects in Fabric.js

本文关键字：对象 分层 布对象 js Fabric      更新时间：2023-09-26

有没有办法通过官方的API在Fabric.js画布上对对象进行分层？现在，我找到的唯一方法是手动遍历画布_对象，并对其重新排序，以便按特定顺序绘制它们。有没有更好的方法可以做到这一点，而不会（潜在地）破坏对象？

[编辑]我已经更正了下面的信息（我的糟糕，我最初想到的是KineticJs api）。

FabricJS有以下API方法可以更改对象的z索引：

canvas.sendBackwards(myObject)
canvas.sendToBack(myObject)
canvas.bringForward(myObject)
canvas.bringToFront(myObject)

FabricJs通过从getObjects（）数组中删除对象并将其拼接回所需位置来更改z索引。它有一个很好的优化，可以检查相交的对象。

bringForward: function (object) {
       var objects = this.getObjects(),
           idx = objects.indexOf(object),
           nextIntersectingIdx = idx;

       // if object is not on top of stack (last item in an array)
       if (idx !== objects.length-1) {
         // traverse up the stack looking for the nearest intersecting object
         for (var i = idx + 1, l = this._objects.length; i < l; ++i) {
           var isIntersecting = object.intersectsWithObject(objects[i]) ||
                                object.isContainedWithinObject(this._objects[i]) ||
                                this._objects[i].isContainedWithinObject(object);
           if (isIntersecting) {
             nextIntersectingIdx = i;
             break;
           }
         }
         removeFromArray(objects, object);
         objects.splice(nextIntersectingIdx, 0, object);
       }
       this.renderAll();
     },

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

步骤2：然后使用sendtoback、sendtofront。。。。fabricjs选项，如低于

在此处回答

我就是这么做的。我给每个结构对象添加了一个zIndex属性，然后在它们添加到画布后调用了一个排序函数：

const CIRCLE_INDEX = 1
let object = new fabric.Circle({
    left: 10,
    top: 10,
    radius: 5
    ...other properties
    zIndex: CIRCLE_INDEX
});

然后在添加对象后调用这样的函数

const sortObjects = () => {
    canvas._objects.sort((a, b) => (a.zIndex > b.zIndex) ? 1 : -1);
    canvas.renderAll();
}

如果您想为所有对象设置特定的顺序，而不是向前/向后移动一个对象，那么将/发送到前面/后面的迭代调用会很慢。

您可以使用bringToFront的代码作为灵感来加速此用例：https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468

这样做：

fabric.Canvas.prototype.orderObjects = function(compare) {
    this._objects.sort(compare);
    this.renderAll();
}

其中compare定义排序，如：

function compare(x,y) {
    return x.getWidth() * x.getHeight() < y.getWidth() * y.getHeight();
}
some_canvas.orderObjects(compare)

如果你想把较小的物体带到前面。

相关文章：