ti-enxame.com

Camada de objetos de tela no Fabric.js

Existe uma maneira de colocar objetos em uma tela Fabric.js por meio da API oficial? No momento, a única maneira de encontrar isso é iterar manualmente os objetos canvas._objetos e reordená-los para que eles sejam desenhados em uma ordem específica. Existe uma maneira melhor de fazer isso que não (potencialmente) quebre o objeto?

20
Zwade

[Editar] Corrigi minhas informações abaixo (meu mal, estava pensando originalmente na API do KineticJs).

O FabricJS possui estes métodos de API que alteram o índice z de objetos:

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

Sob as capas, FabricJs altera o índice z removendo o objeto da matriz getObjects () e unindo-o novamente na posição desejada. Possui uma otimização agradável que verifica a interseção de objetos.

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();
     },
44
markE

etapa 1: você pode usar preserveObjectStacking: true

passo 2: use sendtoback, sendtofront .... fabricjs opções como abaixo

Respondido aqui

3
vijay

Se você deseja definir uma ordem específica para todos os objetos, em vez de mover um objeto para frente/para trás, as chamadas iterativas para trazer/enviar para frente/trás são lentas.

Você pode usar o código bringToFront como inspiração para acelerar esse caso de uso: https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js # L1468

E faça o seguinte:

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

Onde compare define a classificação, como:

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

some_canvas.orderObjects(compare)

Se você deseja trazer objetos menores para a frente.

1
Herbert