FabricJSキャンバス上のすべてのオブジェクトをアクティブにしてグループにするにはどうすればよいですか？

Question

ボタンをクリックするたびに、キャンバス上のすべてのオブジェクトが選択されてグループ化され、すべてが一緒に操作されるようにしています。キャンバス上のすべてのオブジェクトをグループ化/グループ解除したいときに、必要なオブジェクトを選択する必要がありますが、必要な方法でほとんど機能するオブジェクトのグループ化とグループ解除の良い例が見つかりました。

私は私が変更されたことがわかっ例に：http://jsfiddle.net/softvar/NuE78/1/

マイ変形例：http://jsfiddle.net/NuE78/68/

var canvas = new fabric.Canvas('paper', { 
    isDrawingMode: true 
}); 
$("#select").click(function() { 
    canvas.isDrawingMode = false; 
}); 
$("#draw").click(function() { 
    canvas.isDrawingMode = true; 
}); 
$("#group").on('click', function() { 
    var group = new fabric.Group(); 

    for(var i = 0; i < canvas.getObjects().length; i++) { 
    group.addWithUpdate(canvas.getObjects()[i]); 
    } 
    canvas.setActiveGroup(group); 
    canvas.renderAll(); 
    var activegroup = canvas.getActiveGroup(); 
    activegroup.clone(function(newgroup) { 
    canvas.discardActiveGroup(); 
    canvas.getObjects().forEach(function(object) { 
     canvas.remove(object); 
    }); 
    canvas.add(newgroup); 

    }); 
}); 

$("#ungroup").click(function() { 
    var obj = canvas.getObjects()[0]; 
    if (obj.type == "group") { 
    var items = obj._objects; 
    obj._restoreObjectsState(); 
    canvas.remove(obj); 
    for (var i = 0; i < items.length; i++) { 
     canvas.add(items[i]); 
     canvas.item(canvas.size() - 1).hasControls = true; 
    } 
    canvas.renderAll(); 
    } 
}); 

Answer 1

は、ここではそれを達成できた方法です...

var canvas = new fabric.Canvas('paper', { 
 
    isDrawingMode: true 
 
}); 
 
$("#draw").click(function() { 
 
    canvas.isDrawingMode = true; 
 
}); 
 
$("#group").on('click', function() { 
 
    canvas.isDrawingMode = false; 
 
    selectAllObjects(); 
 
    var activegroup = canvas.getActiveGroup(); 
 
    var objectsInGroup = activegroup.getObjects(); 
 
    activegroup.clone(function(newgroup) { 
 
     canvas.discardActiveGroup(); 
 
     objectsInGroup.forEach(function(object) { 
 
      canvas.remove(object); 
 
     }); 
 
     canvas.add(newgroup); 
 
    }); 
 
}); 
 
$("#ungroup").click(function() { 
 
    var activeObject = canvas.getActiveObject(); 
 
    if (activeObject.type == "group") { 
 
     var items = activeObject._objects; 
 
     activeObject._restoreObjectsState(); 
 
     canvas.remove(activeObject); 
 
     for (var i = 0; i < items.length; i++) { 
 
      canvas.add(items[i]); 
 
      canvas.item(canvas.size() - 1).hasControls = true; 
 
     } 
 
     canvas.renderAll(); 
 
    } 
 
}); 
 

 
function selectAllObjects() { 
 
    var objs = canvas.getObjects().map(function(o) { 
 
     return o.set('active', true); 
 
    }); 
 
    var group = new fabric.Group(objs, { 
 
     originX: 'center', 
 
     originY: 'center' 
 
    }); 
 
    canvas._activeObject = null; 
 
    canvas.setActiveGroup(group.setCoords()).renderAll(); 
 
}

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
canvas { 
 
    border:1px solid grey; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.3.0/fabric.min.js"></script> 
 
<canvas id="paper" width="635" height="198"></canvas> 
 
<button id="draw">Drawing mode</button> 
 
<button id="group">Group</button> 
 
<button id="ungroup">Ungroup</button>