Układanie obiektów canvas w Fabric.js

Czy istnieje sposób na warstwowanie obiektów na płótnie Fabric.js za pośrednictwem oficjalnego interfejsu API? W tej chwili jedynym sposobem, jaki udało mi się to zrobić, jest ręczne wykonanie iteracji w canvas._objects i uporządkowanie ich tak, aby były rysowane w określonej kolejności. Czy istnieje lepszy sposób na zrobienie tego, który nie (potencjalnie) nie złamie obiektu?Układanie obiektów canvas w Fabric.js

Źródło

2013-02-22 Zwade

[Edytuj] Poprawiłem moje informacje poniżej (moje złe, początkowo myślałem o api KineticJs).

FabricJS ma następujące metody API, które zmieniają kolejność nakładania obiektów:

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

pod przykryciem, FabricJs zmienia kolejność nakładania przez usunięcie obiektu z getObjects() Tablica oraz do łączenia go z powrotem żądana pozycja. Ma ładną optymalizację, która sprawdza przecinające się obiekty.

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

Źródło

2013-02-23 05:05:27 markE

Dziękujemy! To oszczędza mi wielu kłopotów. – Zwade

czy fabricjki mają wbudowany system indeksowania stosu obiektów ... wtedy mógłbym zrobić coś takiego jak 'var idx = some_object.get_zIndex()' – dsdsdsdsd

Możesz otrzymać indeks z: canvas.getObjects(). IndexOf (some_object) . Dostępne są cztery komendy do zmiany kolejności układania: some_object.sendBackwards(), some_object.sendToBack(), some_object.bringForward() i some_object.bringToFront(). – markE

krok 1: Można użyć preserveObjectStacking: true

Krok 2: użyj sendtoback, sendtofront .... fabricjs opcje jak poniżej

Answered over here

Źródło

2017-01-26 18:01:12 vijay

Jeśli chcesz ustawić specyficzny porządkowanie wszystkich obiektów, zamiast przesuwania jednego obiektu do przodu/do tyłu, iteracyjne wywołania do wywołania/wysłania do przodu/do tyłu są powolne.

Można użyć kodu z bringToFront jako inspiracji, aby przyspieszyć ten przypadek zużyć: https://github.com/kangax/fabric.js/blob/586e61dd282b22c1d50e15c0361875707e526fd8/src/static_canvas.class.js#L1468

I to zrobić:

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

Gdzie porównania określa sortowania, jak:

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

some_canvas.orderObjects(compare)

Jeśli chcesz przynieść mniejsze przedmioty z przodu.

Źródło

2017-07-06 07:43:57 Herbert

Układanie obiektów canvas w Fabric.js

Odpowiedz

Powiązane problemy