заказ объектов фабрики в группе - PullRequest
Новая
       6

заказ объектов фабрики в группе

0 голосов
/ 08 января 2019

Я понятия не имею, как упорядочить объекты в группе, а затем повторить добавление и удаление для сортировки объектов.

Я пытался unshift на групповых объектах, но это не сохраняет состояние. 

$(document).on("click", "#addToGroup", function() { 
var objects = canvas.getActiveObject();

    if(objects && objects.type === "activeSelection") {
      objects.toGroup();
      canvas.requestRenderAll();
    }   
});


count = 1;   

$(document).on("click", "#addObject", function() {
    canvas.add(new fabric.Rect({
      width: 100, height: 100, left: 100 + (count * 20), top: 20 + (count * 10), angle: -10,
      fill: 'rgba(0,200,0,1)'
    }));
});

Шаблон JSFiddle

1 Ответ

0 голосов
/ 08 января 2019

Вы можете использовать fabric.Object.prototype.moveTo () . Существует недокументированное поведение: если объект, к которому вы обращаетесь, является частью группы, объект перемещается в массив _objects группы, эффективно изменяя его z-индекс при перерисовке группы.

Кроме того, убедитесь, что после этого каким-то образом заставили ткань перерисовать группу, например, набор group.dirty = true. 

const canvas = new fabric.Canvas("c")

const a = new fabric.Rect({
  width: 100,
  height: 100,
  left: 100,
  top: 20,
  angle: -10,
  fill: 'rgba(0,200,0,1)'
})
const b = new fabric.Rect({
  width: 50,
  height: 100,
  left: 150,
  top: 50,
  angle: 45,
  stroke: '#eee',
  strokeWidth: 10,
  fill: 'rgba(0,0,200,1)'
})
const c = new fabric.Circle({
  radius: 50,
  left: 150,
  top: 75,
  fill: '#aac'
})

const group = new fabric.Group([a, b, c])
canvas.add(group).requestRenderAll()

document.querySelector('#b1').addEventListener('click', () => {
  const bottomChild = group.getObjects()[0]
  bottomChild.moveTo(group.size() - 1)
  // force fabric to redraw the group
  group.dirty = true
  canvas.requestRenderAll()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.js"></script>
<canvas id='c' width="400" height="200"></canvas>
<button id='b1'>move bottom to top</button>
...