La superposition de toile des objets dans Fabric.js

Est-il un moyen pour les objets de la couche sur un Fabric.js toile, via l'officiel de l'API? Actuellement, le seul moyen que j'ai trouvé pour faire ça manuellement itérer à travers la toile._objects et les réorganiser afin qu'ils obtiennent attirés dans un ordre spécifique. Est-il une meilleure façon de faire ce qui ne fonctionne pas (peut-être) de casser l'objet?

InformationsquelleAutor Zwade | 2013-02-22
  1. 43

    [Modifier]
    J'ai corrigé mes infos ci-dessous (my bad, j'ai été à l'origine de la pensée de l'KineticJs api).

    FabricJS a ces méthodes de l'API qui permet de changer la valeur z-index d'objets:

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

    Sous les couvertures, FabricJs changements le z-index, par la suppression de l'objet à partir de la getObjects() tableau et l'épissage de l'arrière dans la position souhaitée. Il a une belle optimisation qui permet d'intersection des objets. 

    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();
     },
    • Merci!!!! Cela me permet d'économiser beaucoup d'ennuis.
    • ne fabricjs ont un objet intégré de la pile système d'index ... alors je pourrais faire quelque chose comme var idx = some_object.get_zIndex()
    • Vous pouvez obtenir le z-index: toile.getObjects().indexOf(some_object). Quatre commandes sont disponibles pour modifier l'ordre d'empilement: some_object.sendBackwards(), some_object.sendToBack(), some_object.bringForward(), et some_object.bringToFront().
    • ahh ok, bien sûr ... si c'était un serpent, il aurait peu de moi ... merci.
    • comment changer z-ndex position à l'aide de la méthode?
    • L'utilisation de ces canevas méthodes pour affecter le z-index des objets par rapport à d'autres objets: bringToFront(objet) bringFoward(objet) sendToBack(objet) sendBackwards(objet). Les deux sendBackwards et bringForward accepter un deuxième objet que vous souhaitez à l'index par rapport à.
    • À l'aide de markE suggestion a fonctionné pour moi. J'avais une ligne qui devait être à l'origine de tout, sauf un seul objet. Cette travaillés: canevas.sendToBack(aLine); de la toile.bringForward(aLine, bg_group);

    InformationsquelleAutor markE
  2. 2

    étape 1 : Vous pouvez Utiliser preserveObjectStacking: true

    étape 2 : ensuite, utilisez sendtoback,sendtofront....fabricjs options comme ci-dessous

    Répondu par ici

    InformationsquelleAutor vijay
  3. 1

    Si vous souhaitez définir un classement spécifique pour tous les objets, au lieu de déplacer un objet vers l'avant/vers l'arrière, itératif appels à apporter/envoyer à l'avant/à l'arrière sont lents.

    Vous pouvez utiliser le code de bringToFront comme source d'inspiration pour la vitesse de ce cas d'utilisation jusqu': https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468

    Et ce faire:

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

    Où comparer définit l'ordre de tri, comme:

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

some_canvas.orderObjects(compare)

    Si vous souhaitez apporter des objets de petite taille à l'avant.

    InformationsquelleAutor Herbert