Путаница в групповых возможностях фабрики - PullRequest
Новая
       12

Путаница в групповых возможностях фабрики

0 голосов
/ 25 октября 2019

Я экспериментировал с фабрикой в ​​последнее время. Я пытаюсь создать групповую структуру (иерархию) слоев, концептуально похожую на растровый редактор, такой как krita / gimp. Другими словами, внутри групп могут быть группы. Из нескольких других вопросов видно, что это следует поддержать, но я запутался из-за двух, казалось бы, противоречивых поведений. Я был бы признателен, если бы кто-то нарушил мои предположения неправильно.

-Расположение предметов в группах. После создания простой иерархии относительные позиции моих групп, кажется, не имеют смысла (позиционирование родительской группы, кажется, не применимо) https://jsfiddle.net/od259pct/3/

var canvas = new fabric.Canvas("t2", {
         // preserveObjectStacking : true
      });
      canvas.setHeight(130);
      canvas.setWidth(130);
      var layers = {};
      var layer_groups = {};

var rect1 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'red'

})

var rect2 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'yellow'

})

// contains groups 2 and 3
// modifying "top" and "left" seems to have no effect?
var group1 = new fabric.Group([],{
'top':50,
  'left':20,

})

//will contain rect1 (red)
var group2 = new fabric.Group([],{
'top':0,
  'left':0,

})

// will contain rect2 (yellow)
var group3 = new fabric.Group([],{
'top':0,
  'left':0,
  })


group1.addWithUpdate(group2)
group2.addWithUpdate(rect1)
canvas.add(group1)
group1.addWithUpdate(group3)
group3.addWithUpdate(rect2)

-Z-индекс групп. Я вижу несколько ответов, предлагающих использовать .moveTo () или group.bringForward (). Однако ни один из них, похоже, не оказывает никакого влияния на группы внутри групп. Во-вторых, никогда не объясняется, являются ли значения индекса, используемые в этих функциях, абсолютными для всего холста или только внутри этой группы. https://jsfiddle.net/od259pct/4/

var canvas = new fabric.Canvas("t2", {
     // preserveObjectStacking : true
  });
  canvas.setHeight(130);
  canvas.setWidth(130);
  var layers = {};
  var layer_groups = {};

var rect1 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'red'

})

var rect2 = new fabric.Rect({
    'top':0,
  'left':0,
  'width':30,
  'height':30,
  'fill':'yellow'

})

// contains groups 2 and 3
var group1 = new fabric.Group([],{
'top':0,
  'left':0,
  'width':30,
  'height':30,
})

//will contain rect1 (red)
var group2 = new fabric.Group([],{
'top':0,
  'left':0,
  'width':30,
  'height':30,
})

// will contain rect2 (yellow)
var group3 = new fabric.Group([],{
'top':0,
  'left':0,
  'width':30,
  'height':30,
})


group1.add(group2)
group2.add(rect1)
canvas.add(group1)
group1.add(group3)
group3.add(rect2)

// none of these seem to work (trying to move the yellow rect group under the red rect group)
group1.sendBackwards(group3)
canvas.sendBackwards(group3)

// nor these
group1.bringForwards(group2)
canvas.bringForwards(group2)

1 Ответ

0 голосов
/ 26 октября 2019

group # addWithUpdate обновит размер и положение. Просто вызовите add при добавлении в группу, после добавления объектов вызовите group.addWithUpdate(), чтобы обновить измерение.

DEMO 

var canvas = new fabric.Canvas("t2", {
  // preserveObjectStacking : true,
  width: 130,
  height:130
});

var rect1 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'red'
})

var rect2 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'yellow'
})

// contains groups 2 and 3
// modifying "top" and "left" seems to have no effect?
var group1 = new fabric.Group([], {
  'top': 50,
  'left': 20,
})

//will contain rect1 (red)
var group2 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})

// will contain rect2 (yellow)
var group3 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})
canvas.add(group1)

group1.add(group2)
group2.addWithUpdate(rect1)

group1.add(group3)
group3.addWithUpdate(rect2)
group1.addWithUpdate()
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<div id="t2-cont" >
  <canvas id="t2" style="border:black solid 2px;"></canvas>
</div>

И для изменения позиции вызова объекта moveTo на сгруппированном объекте.

DEMO 

const canvas = new fabric.Canvas("t2", {
  // preserveObjectStacking : true,
  width: 130,
  height:130
});

const rect1 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'red'
})

const rect2 = new fabric.Rect({
  'top': 0,
  'left': 0,
  'width': 30,
  'height': 30,
  'fill': 'yellow'
})

// contains groups 2 and 3
// modifying "top" and "left" seems to have no effect?
const group1 = new fabric.Group([], {
  'top': 50,
  'left': 20,
})

//will contain rect1 (red)
const group2 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})

// will contain rect2 (yellow)
const group3 = new fabric.Group([], {
  'top': 0,
  'left': 0,
})
canvas.add(group1)

group1.add(group2)
group2.addWithUpdate(rect1)

group1.add(group3)
group3.addWithUpdate(rect2)
group1.addWithUpdate()

setTimeout(()=> {
  group2.moveTo(1);
  group1.addWithUpdate();
  canvas.requestRenderAll();
}, 1000)
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<div id="t2-cont" >
  <canvas id="t2" style="border:black solid 2px;"></canvas>
</div>
...