Fabric.js는 HTML5 캔버스 위에서 동적인 그래픽을 생성하고 조작할 수 있는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 다양한 도형을 그리고 사용자와 상호작용할 수 있는 웹 애플리케이션을 만들 수 있습니다.
이번 포스트에서는 Fabric.js를 활용하여 간단한 웹 페이지에서 사각형을 그리는 방법을 알아보겠습니다.
1. Fabric.js 설치하기
먼저 Fabric.js를 사용하기 위해서는 해당 라이브러리를 설치해야 합니다. npm을 사용한다면 아래 명령어를 실행하여 패키지를 설치할 수 있습니다.
npm install fabric
2. HTML 구성하기
다음으로는 사각형을 그릴 HTML 페이지를 작성합니다. 아래와 같이 canvas 요소를 추가합니다. Fabric.js는 이 canvas 요소를 기반으로 그래픽을 그리고 조작합니다.
<!DOCTYPE html>
<html>
<head>
<title>Fabric.js로 사각형 그리기</title>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>
3. JavaScript로 사각형 그리기
이제 Fabric.js를 사용하여 사각형을 그리는 JavaScript 코드를 작성해보겠습니다. 아래와 같이 코드를 작성합니다.
// Fabric.js 라이브러리 불러오기
import fabric from 'fabric';
// canvas 요소 가져오기
const canvas = new fabric.Canvas('canvas');
// 사각형 객체 생성
const rect = new fabric.Rect({
left: 100,
top: 100,
width: 200,
height: 100,
fill: 'red'
});
// 사각형을 캔버스에 추가
canvas.add(rect);
이 코드는 fabric 모듈을 불러와서 canvas 요소를 가져온 다음, Rect 클래스를 사용하여 사각형 객체를 생성하고 add 메소드를 사용하여 사각형을 캔버스에 추가합니다. 사각형의 left, top, width, height, fill 등의 속성을 조정하여 원하는 모양으로 사각형을 그릴 수 있습니다.
4. 결과 확인하기
웹 브라우저에서 HTML 페이지를 열어보면 캔버스 위에 빨간색 사각형이 그려진 것을 확인할 수 있습니다. 이제 사각형을 드래그하거나 크기를 변경하는 등의 상호작용을 추가할 수 있습니다.
이처럼 Fabric.js를 사용하여 도형을 그리고 조작하는 것은 매우 간단하고 직관적입니다. 따라서 복잡한 그래픽 처리나 사용자 인터랙션을 필요로 하는 웹 애플리케이션을 개발할 때 Fabric.js를 사용하면 편리하고 효율적입니다.