Есть ли способ сложить объекты на холсте Fabric.js через официальный API? Прямо сейчас единственный способ, которым я нашел это, - это вручную выполнить итерацию через canvas._objects и переупорядочить их, чтобы они рисовались в определенном порядке. Есть ли лучший способ сделать это, который не (потенциально) разрушает объект?
Слоистые объекты холста в Fabric.js
Ответ 1
[Изменить] Я скорректировал свою информацию ниже (мой плохой, я изначально думал о 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();
},
Ответ 2
Шаг 1: Вы можете использовать preserveObjectStacking: true
шаг 2: затем используйте sendtoback, sendtofront.... параметры fabricjs, как показано ниже
Ответ 3
Если вы хотите установить конкретное упорядочение для всех объектов, вместо перемещения одного объекта вперед/назад, итеративные вызовы для переноса/отправки на передний/задний медленны.
Вы можете использовать код 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)
Если вы хотите перенести меньшие объекты на передний план.