Question

在我的帆布面料中，我有几个包含3个对象的组：一个Rect，一个IText和一个图像

因为它是一个群体，所以不可能：

修改IText，
将事件归属于该组的一个对象。

我的想法是：在事件“object：selected”上，对象被取消分组以便：

能够直接在画布上修改IText，
将事件归属于十字架。

我的问题是：如何在不从画布中删除对象的情况下删除组。我只发现了这两个方法：remove（）和removeWithUpdate（），但它从画布中删除了对象，组仍然在这里......。我想要对象而不是组......任何想法？

这是一个例子：在“对象：选中”我希望“hello world”留在画布上但不在小组中：

var canvas_Planning;

$(document).ready(function() {
  canvas_Planning = new fabric.Canvas('canvas');
  var text = new fabric.IText('hello world', {
    fontSize: 30
  });
  var circle = new fabric.Circle({
    radius: 100,
    fill: '#eef',
    scaleY: 0.5
  });
  var group = new fabric.Group([ circle, text], {
    left: 150,
    top: 100,
    angle: -10
  });
  canvas_Planning.add(group);

  canvas_Planning.on('object:selected', function(oCurseur){
    if (oCurseur.target.type == 'group') {
      canvas_Planning.forEachObject(function(o){
        oCurseur.target.remove(oCurseur.target.item(1)); 
      });
    }
  })
});

Answer 1

感谢您的链接，这是解决方案:)但我从未成功使用restoreObjectsState（）函数.... 实际上我希望用户能够直接在画布上更改组的IText，而不是以编程方式。

单击一个组（鼠标：向上）后，我取消组合，然后用户可以更改IText 当用户想要移动该组或与其他组进行其他操作时，我会重新组合该组

这里我试图给出一个非常简单的例子：

gbbUngroup = false;
gbbOnMove = false;
gbbIsDown = false;
var iGaucheGroupe;
var iHautGroupe;

canvas.on('mouse:up', function(oCursor){
    gbbIsDown = false;
    if ((oCurseur.target.type == 'group') && (gbbOnMove == false)){
        //ungroup the group to modify the IText
        ungroup();
        gbbUngroup = true;
    } else {
        gbbOnMove = false;
    }

});
canvas.on('mouse:down', function(oCursor){
    gbbIsDown = true;
});

canvas.on('mouse:move', function(oCursor){
    if ((gbbUngroup == true) && (gbbIsDown)) {  //(you can add other conditions)
        //group the objects
        group();
        gbbOnMove = true;
    }
});   

function ungroup(){
    var fabGroupeSelectionne = canvas.getActiveObject();
    var i=0;
    var lItems = fabGroupeSelectionne._objects;

    //I keep the coordinates of my group (my objects are at the top anf left of the group)
    iGaucheGroupe = fabGroupeSelectionne.getLeft();
    iHautGroupe = fabGroupeSelectionne.getTop();

    //I delete the group
    canvas.remove(fabGroupeSelectionne);
    while (i < fabGroupeSelectionne.size()) {

        //I create separatly the objects of the group
        lItems[i].set({left : iGaucheGroupe, top : iHautGroupe, selectable : true});
        canvas.add(lItems[i]);
        i++;
    }
    canvas.renderAll();
}
function group(){
    var fabReGroup = new fabric.Group([
    canvas.item(canvas.size()-2).clone(),
    canvas.item(canvas.size()-1).clone()
    ]);
    fabReGroup.set({left: iGaucheGroupe, top : iHautGroupe});
    canvas.item(canvas.size()-2).remove();
    canvas.item(canvas.size()-1).remove();
    canvas.add(fabReGroup); 
}

Answer 2

可以更改组内的文本。我们遇到了同样的问题，并提出了以下解决方案。我们以编程方式将活动对象设置为组的所需对象。然后你可以根据需要修改它。假设canvas._object [0]是组，canvas._object [0] ._ objects [1]是iText。

canvas_Planning.setActiveObject(canvas._objects[0]._objects[1]); 
var activeObj = canvas_Planning.getActiveObject();
//Change Text or do other stuff with it
activeObj.setText('your text');
canvas_Planning.renderAll();

如果您想取消组合项目，msievers在github上有一个很好的解决方案：https://gist.github.com/msievers/6069778 希望这可以帮助。问候，贝尼克

FABRIC JS在不删除对象的情况下取消组合

2 个答案: