Fabric.js는 HTML5 캔버스를 위한 강력한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 웹 페이지에서 그래픽 객체를 쉽게 만들고 조작할 수 있습니다. 이번 글에서는 Fabric.js를 사용하여 객체를 그룹핑하고 언그룹핑하는 방법에 대해 알아보겠습니다.

객체 그룹핑하기

Fabric.js를 사용하여 그룹을 생성하려면 fabric.Group 클래스를 사용해야 합니다. 아래는 객체를 그룹으로 만드는 예제입니다.

var canvas = new fabric.Canvas('canvas');

var rect1 = new fabric.Rect({
  left: 50,
  top: 50,
  width: 50,
  height: 50,
  fill: 'red'
});

var rect2 = new fabric.Rect({
  left: 100,
  top: 100,
  width: 50,
  height: 50,
  fill: 'blue'
});

canvas.add(rect1, rect2);

var group = new fabric.Group([rect1, rect2], {
  left: 50,
  top: 50
});

canvas.add(group);
canvas.renderAll();

위의 예제에서는 fabric.Rect 클래스로 두 개의 사각형 객체를 생성합니다. 그리고 이 두 객체를 fabric.Group 클래스로 그룹으로 만든 후, 캔버스에 추가합니다. left와 top 속성은 그룹의 위치를 지정하며, 캔버스에 그룹을 추가한 후 renderAll 메서드를 호출하여 캔버스를 렌더링합니다.

객체 언그룹핑하기

그룹으로 묶인 객체를 언그룹핑하려면 fabric.Group 객체의 toObjects() 메서드를 사용해야 합니다. 아래는 객체를 언그룹핑하는 예제입니다.

var objects = group.toObjects();
canvas.remove(group);

for (var i = 0; i < objects.length; i++) {
  canvas.add(objects[i]);
}

canvas.renderAll();

위의 예제에서는 toObjects 메서드를 사용하여 그룹에 속한 객체들을 배열로 가져옵니다. 그리고 remove 메서드를 사용하여 그룹을 캔버스에서 제거한 후, 각각의 객체를 다시 캔버스에 추가합니다. 마지막으로 renderAll 메서드를 호출하여 캔버스를 다시 렌더링합니다.

이제 Fabric.js를 사용하여 객체를 그룹핑하고 언그룹핑하는 방법을 알게 되었습니다. 이러한 기능을 사용하여 웹 페이지에서 그래픽 객체를 더욱 효율적으로 관리할 수 있습니다.

더 자세한 내용은 Fabric.js 공식 문서를 참고하시기 바랍니다.