Как разгруппировать несколько IText с использованием fabricJS версии 1.7.22? - PullRequest
Новая
       19

Как разгруппировать несколько IText с использованием fabricJS версии 1.7.22?

0 голосов
/ 27 марта 2019

Я реализую функциональность группировки и разгруппирования.

моя группировка и разгруппировка работают правильно для изображений. но когда я выбираю несколько IText с помощью мыши и сгруппировать его.

группировка работает очень хорошо, но когда я разгруппирую эту группу,

мой весь IText прозрачен. мы можем выбрать этот IText, но только пустое поле. 

fiddle linked below for generate issue :

https://jsfiddle.net/Mark_1998/71g6enkd/

Чтобы переиздать проблему, шаги находятся в скрипке.

Есть ли какие-либо патчи для этой проблемы?

1 Ответ

1 голос
/ 28 марта 2019

Вам нужно позвонить group # destroy .

DEMO 

var grp = document.getElementById('grp')
var ungrp = document.getElementById('ungrp')
var c = document.getElementById('c');
var canvas = new fabric.Canvas(c);
canvas.setHeight(300);
canvas.setWidth(500);

var text = new fabric.IText('this is test', {
  top: 100,
  left: 100,
  fill: 'red',
  fontSize: 40
});
canvas.add(text);

var text1 = new fabric.IText('this is test', {
  top: 150,
  left: 150,
  fill: 'red',
  fontSize: 20
});
canvas.add(text1);

grp.addEventListener('click', makeGroup);
ungrp.addEventListener('click', makeUngroup);

function makeGroup() {
  console.log('make group call');
  if (!canvas.getActiveGroup()) {
    return;
  }
  var activegroup = canvas.getActiveGroup() || canvas.getActiveObject();
  var objectsInGroup = activegroup.getObjects();
  activegroup.clone(function(newgroup) {
    canvas.discardActiveGroup();
    canvas.deactivateAllWithDispatch();
    objectsInGroup.forEach(function(object) {
      canvas.remove(object);
    });
    canvas.add(newgroup);
  });
}

function makeUngroup() {
  var activeObject = canvas.getActiveObject();
  if (activeObject && activeObject.type == "group") {
    var items = activeObject.getObjects();
    activeObject.destroy();
    canvas.remove(activeObject);
    for (var i = 0; i < items.length; i++) {
      canvas.add(items[i]);
    }
    canvas.renderAll.bind(canvas);
  }
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.js"></script>
<button id="grp">
Make Group
</button>
<button id="ungrp">
Make UnGroup
</button>
<canvas id="c" style="border: 1px solid"></canvas>
...