Question

我想使用相同的对象创建多个组，但希望它们在我更改任何对象时独立工作，不应使用fabricjs在其他组中更改它。

作为一个例子，当我运行我的小提琴时，文本是“默认文本”然后我取消组合并编辑文本，然后在组后如果我使用按钮添加新组，则新组文本被编辑为先前的文本组，但希望它“默认文本”，并希望两个组独立。

sed -e "s/^.*\(.\)$/\1/"

Demo

Answer 1

每次创建单独的对象。不要在prev创建的对象上进行中继。重新组合时从选择中获取对象并添加到组中，并在删除组时，从画布中删除并将组中包含的对象添加到画布。

<强> 样本

var canvas = new fabric.Canvas('c');
canvas.renderOnAddition = true;
newGroup();

function newGroup() {
  //Group text and rectangle
  var rectangle = new fabric.Rect({
    width: 100,
    height: 100,
    fill: '#ffcc12',
    opacity: 1
  });

  var textObject = new fabric.IText("Default Text", {
    left: 0,
    top: 0,
    fontSize: 18,
    fill: '#000000'
  });

  var group = new fabric.Group([rectangle, textObject], {
    left: 150,
    top: 150
  });

  canvas.add(group);
};

function removegroup() {
  var obj = canvas.getActiveObject();
  if (!obj || obj.type != 'group') return;

  var items = obj._objects;
  obj.destroy();
  canvas.remove(obj);
  for (var i = 0; i < items.length; i++) {
    canvas.add(items[i]);
  }
  canvas.renderAll();
};

function regroup() {
  var grp = canvas.getActiveGroup();
  if (!grp) return;
  canvas.deactivateAll();
  var items = grp._objects;
  var grp = new fabric.Group(items);
  canvas.add(grp);
  for (var i = 0; i < items.length; i++) {
    canvas.remove(items[i]);
  }
  canvas.renderAll();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #000000;"></canvas>
    
<button id="aligntext" onclick="newGroup()">New Group</button> 
<button id="aligntext" onclick="removegroup()">Remove Group</button>
<button id="aligntext" onclick="regroup()">Re Group</button>

Fabricjs使用相同对象的多个组，没有任何冲突

1 个答案: