如何使 FabricJS canvas 上的所有对象都处于活动状态但作为一个组？

Question

我正在尝试做到这一点，只要单击一个按钮，canvas 上的所有对象都会被 select 编辑并放入一个组中，以便一起操作它们。我找到了一个很好的对象分组和取消分组的例子，它几乎可以按我需要的方式工作，但是它要求用户 select 他们想要的对象，而我希望 canvas 上的所有对象都是 grouped/ungrouped.

我发现修改的例子：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>

Answer 2

Grunt 的回答适用于 fabric.js 1.6.1

使其在 fabric.js 2.2.3 上运行：

var canvas = new fabric.Canvas('paper', {
    isDrawingMode: true
});
$("#draw").click(function() {
    canvas.isDrawingMode = !canvas.isDrawingMode;
});
$("#group").on('click', function() {
  if (!canvas.getActiveObject()) {
          return;
        }
        if (canvas.getActiveObject().type !== 'activeSelection') {
          return;
        }
        canvas.getActiveObject().toGroup();
        canvas.requestRenderAll();
});
$("#ungroup").on('click', function() {
    if (!canvas.getActiveObject()) {
          return;
        }
        if (canvas.getActiveObject().type !== 'group') {
          return;
        }
        canvas.getActiveObject().toActiveSelection();
        canvas.requestRenderAll();
});

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>

如何使 FabricJS canvas 上的所有对象都处于活动状态但作为一个组？

How do I make all objects on a FabricJS canvas active but as a group?

javascript

canvas

fabricjs