[javascript] Fabric.js의 기본 사용법

30 Nov 2023

Fabric.js는 JavaScript 기반의 오픈 소스 캔버스 라이브러리로, 웹 애플리케이션에서 그래픽 요소를 만들고 조작하는 데 사용됩니다. 이번 블로그 포스트에서는 Fabric.js의 기본 사용법에 대해 알아보겠습니다.

설치

Fabric.js를 사용하려면 먼저 해당 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 Fabric.js를 설치할 수 있습니다.

npm install fabric

또는 HTML 파일에서 직접 스크립트 태그를 사용하여 Fabric.js를 가져올 수도 있습니다.

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

Fabric.js를 사용하여 기본적인 그래픽 요소를 생성하고 조작하는 방법을 알아보겠습니다.

먼저, HTML 파일의 <canvas> 요소를 선택하고 Fabric.js의 fabric.Canvas 클래스를 통해 캔버스 인스턴스를 생성합니다.

const canvasElement = document.getElementById('canvas');
const canvas = new fabric.Canvas(canvasElement);

Fabric.js를 사용하여 사각형을 추가하는 예제입니다.

const rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 150,
  fill: 'red'
});

canvas.add(rect);

Fabric.js를 사용하여 텍스트를 추가하는 예제입니다.

const text = new fabric.Text('Hello Fabric.js', {
  left: 200,
  top: 200,
  fontSize: 20,
  fill: 'blue'
});

canvas.add(text);

Fabric.js를 사용하여 그래픽 요소를 그룹화하는 예제입니다.

const group = new fabric.Group([rect, text], {
  left: 300,
  top: 300
});

canvas.add(group);

Fabric.js를 사용하여 그래픽 요소를 변형하는 예제입니다.

rect.set({ left: 150 });
text.set({ color: 'red' });

canvas.renderAll();

Fabric.js의 기본 사용법에 대해 알아보았습니다. 이번 포스트에서는 캔버스 생성, 그래픽 요소 추가, 그룹화, 변형 등을 다루었습니다. Fabric.js는 강력한 도구이며 다양한 기능을 제공하므로 자세한 사항은 공식 문서를 참조하시기 바랍니다.