Fabric js：对所有对象进行分组

Question

是否有可能在fabric js中，在点击事件时将画布上存在的所有对象分组

Answer 1

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

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();
}

live jsfiddle : http://jsfiddle.net/tornado1979/y6fqj8go/

希望有帮助，祝你好运。

新更新的提琴手链接：http://jsfiddle.net/yogeshwari/sezxhqc4/1/