Fabric.js는 HTML5 캔버스에서 그래픽 객체를 손쉽게 다룰 수 있도록 도와주는 JavaScript 라이브러리입니다. 이번 포스트에서는 Fabric.js를 사용하여 다중 객체를 그리는 방법에 대해 알아보겠습니다.

준비하기

Fabric.js를 사용하기 위해 먼저 해당 라이브러리를 다운로드하고 HTML 문서에 포함시켜야 합니다. 아래의 코드는 Fabric.js 라이브러리를 가져오는 예시입니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>

캔버스 생성하기

다중 객체를 그리기 위해 캔버스를 생성해야 합니다. 캔버스는 HTML 문서의 특정 요소에 배치되어야 합니다. 아래의 코드는 캔버스를 생성하는 예시입니다.

<canvas id="myCanvas" width="800" height="600"></canvas>

객체 생성하기

Fabric.js에서 객체는 fabric.Object 클래스의 인스턴스로 생성됩니다. 다중 객체를 그리기 위해 각각의 객체를 생성하고 원하는 속성 값을 설정해야 합니다. 아래의 코드는 원과 사각형을 생성하는 예시입니다.

var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
});

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

캔버스에 객체 추가하기

객체를 생성한 후에는 이를 캔버스에 추가해야 합니다. Fabric.js는 fabric.Canvas 클래스를 사용하여 캔버스를 관리합니다. 객체를 캔버스에 추가하기 위해 add 메서드를 사용하면 됩니다. 아래의 코드는 캔버스에 생성한 객체들을 추가하는 예시입니다.

var canvas = new fabric.Canvas('myCanvas');
canvas.add(circle);
canvas.add(rectangle);

결과 확인하기

위의 코드를 실행시키면 캔버스에 빨간색 원과 파란색 사각형이 그려집니다. 캔버스에서 객체들을 드래그하거나 크기를 조절할 수 있습니다.

결론

이번 포스트에서는 Fabric.js를 사용하여 다중 객체를 그리는 방법에 대해 알아보았습니다. Fabric.js는 많은 기능을 제공해주고 다른 요소들과의 통합도 쉽게 할 수 있어 편리하게 사용할 수 있는 JavaScript 라이브러리입니다.

더 많은 정보를 원하신다면 Fabric.js 공식 사이트를 참조하시기 바랍니다.