Javascript Fabric js：创建所有对象的组

在fabric js中，单击事件是否可以对画布上的所有对象进行分组

是，单击事件是否可以对所有画布对象进行分组。 下面我将向您展示一个示例，该示例创建三个对象并在单击时对它们进行分组

var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';

//create circle object
 var circle = new fabric.Circle({
                  radius: 20, 
                  fill: 'red', 
                  left: 100, 
                  top: 100
                });
            canvas.add(circle);


//create square object
var square = new fabric.Rect({
              left: 130, 
              top: 140,
              fill: 'green',
              width: 40,
              height: 80
            });
            canvas.add(square);

canvas.renderAll();


$('#groupthem').on('click', function(event) {
    groupthem();
 });


var site_url =  'http://fabricjs.com/assets/1.svg';

fabric.loadSVGFromURL(site_url, function(objects) { 
          var group = new fabric.PathGroup(objects, { 
          left: 165, 
          top: 100, 
          width: 295, 
          height: 211 
        }); 
        canvas.add(group); 
        canvas.renderAll(); 
          }); 


function groupthem (){

    var objs = [];
    //get all the objects into an array
    objs = canvas._objects.filter(function(obj){
        return obj;
    });

    //group all the objects 
     var alltogetherObj = new fabric.Group(objs,{
                top:200,left:250,
                originX:'center',
                originY:'center'});


    //clear previous objects
    canvas._objects.forEach(function(obj){
        obj.remove();
    });

    canvas.add(alltogetherObj);
    alltogether.setCoords(); 
    canvas.renderAll();
}

现场直播：

希望有帮助，祝你好运

---

新更新的fiddler链接：

它对单个对象的工作很好，但是如果添加组来代替任何单个对象，它会创建额外的组。请您帮助显示一个JSFIDLE，以检查它，因为我不太理解您的问题。但是如果您获得了双组对象，则可以删除其中一个。让我知道