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

在这里，您将如何实现这一目标......

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

Grunt的回答适用于fabric.js 1.6.1

使其适用于fabric.js 2.2.3：

import org.junit.BeforeClass;
import org.junit.Test;

import static junit.framework.TestCase.assertEquals;

public class CalculatorTest {
    private static ICalculator calculator;

    @BeforeClass
    public static void initCalculator() {
        calculator = new Calculator();

    }

    @Test
    public void testSum() {
        int result = calculator.sum(3, 4);
        assertEquals(7, result);
    }
}

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

如何使FabricJS画布上的所有对象都作为一个组激活？

2 个答案: