Многослойные объекты холста в Fabric.js

Есть ли способ сложить объекты на холсте Fabric.js через официальный API? Прямо сейчас единственный способ, которым я нашел это, - это вручную выполнить итерацию через canvas._objects и переупорядочить их, чтобы они рисовались в определенном порядке. Есть ли лучший способ сделать это, который не (потенциально) разрушает объект?Многослойные объекты холста в Fabric.js

источник

2013-02-22 Zwade

[Изменить] Я исправил свою информацию ниже (мой плохой, я изначально думал о KineticJs api).

FabricJS имеет следующие методы API, которые изменяют Z-индекс объектов:

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

Под крышками, FabricJs изменяет Z-индекс путем удаления объекта из GetObjects() массива и сплайсинга его обратно в желаемое положение. Он имеет хорошую оптимизацию, которая проверяет пересекающиеся объекты.

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

источник

2013-02-23 05:05:27 markE

Спасибо! Это сэкономит мне массу неприятностей. – Zwade

does fabricjs имеет встроенную индексную систему стека объектов ... тогда я мог бы сделать что-то вроде 'var idx = some_object.get_zIndex()' – dsdsdsdsd

Вы можете получить z-index: canvas.getObjects(). IndexOf (some_object) , Доступны четыре команды для изменения порядка укладки: some_object.sendBackwards(), some_object.sendToBack(), some_object.bringForward() и some_object.bringToFront(). – markE

шаг 1: Вы можете использовать preserveObjectStacking: true

шаг 2: используйте SendToBack, sendtofront .... fabricjs варианты как ниже

Answered over here

источник

2017-01-26 18:01:12 vijay

Если вы хотите установить конкретный упорядочивая для всех объектов, вместо того, чтобы перемещать один объект вперед/назад, итерационные вызовы для приведения/отправки на фронт/назад медленны.

Вы можете использовать код из 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(); 
}

Где сравнить определяет сортировкой, как:

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

some_canvas.orderObjects(compare)

Если вы хотите перенести меньшие предметы спереди.

источник

2017-07-06 07:43:57 Herbert

Многослойные объекты холста в Fabric.js

ответ

Смежные вопросы