Colin's Blog
[javascript] Fabric.js 소개와 기능

Fabric.js는 HTML5 캔버스에서 그래픽 객체를 생성하고 관리하는 자바스크립트 라이브러리입니다. 이 라이브러리는 그림판, 이미지 편집 도구, 드로잉 애플리케이션 등 다양한 그래픽 관련 웹 애플리케이션을 개발할 때 유용하게 사용될 수 있습니다.

주요 기능

1. 그래픽 객체 생성 및 관리

Fabric.js는 다양한 그래픽 객체를 생성하고 관리할 수 있는 기능을 제공합니다. 예를 들어, 사각형, 원, 다각형 등의 기본 도형을 쉽게 생성할 수 있으며 이러한 객체에 스타일, 크기, 위치 등의 속성을 적용할 수 있습니다. 또한, 텍스트, 이미지, 비디오 등 다양한 미디어를 사용하여 복잡한 그래픽을 생성할 수도 있습니다.

2. 그래픽 객체 편집 및 변형

Fabric.js는 생성된 그래픽 객체를 편집하고 변형할 수 있는 기능을 제공합니다. 사용자는 객체를 선택하여 확대, 축소, 회전 등의 변형을 적용할 수 있으며, 스타일, 크기, 위치 등의 속성을 실시간으로 변경할 수도 있습니다. 또한, 그래픽 객체 간의 겹침 관계를 조정하거나, 객체를 그림판에 배치하는 등의 작업도 가능합니다.

3. 이벤트 처리

Fabric.js는 사용자의 마우스, 키보드 이벤트를 처리하는 기능을 제공합니다. 예를 들어, 객체에 클릭 이벤트를 등록하여 사용자가 객체를 클릭했을 때 특정한 동작을 수행하도록 할 수 있습니다. 또한, 드래그 앤 드롭 등의 상호작용적인 기능도 구현할 수 있습니다.

4. 파일 입출력

Fabric.js는 그래픽 객체를 파일로 저장하거나 파일에서 불러와서 사용할 수 있는 파일 입출력 기능도 제공합니다. 이를 통해 사용자는 그래픽 객체를 저장하고 재사용할 수 있으며, 다른 사용자와 공유할 수도 있습니다.

예제 코드

다음은 Fabric.js를 사용하여 사각형을 그리고 스타일을 변경하는 예제 코드입니다.

<!DOCTYPE html>
<html>
<head>
    <title>Fabric.js Example</title>
    <script src="fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        const canvas = new fabric.Canvas('canvas');

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

        canvas.add(rect);

        rect.set('fill', 'blue');
        rect.set('width', 300);
        rect.set('height', 150);

        canvas.renderAll();
    </script>
</body>
</html>

위 코드는 “canvas”라는 id를 가진 HTML 요소를 생성하고, 해당 캔버스에 Fabric.js를 이용하여 사각형을 추가하는 코드입니다. 사각형을 생성한 후, 스타일 및 크기를 변경하고, canvas.renderAll() 함수를 호출하여 변경한 내용을 화면에 렌더링합니다.

참고 자료

Fabric.js는 그래픽 관련 웹 애플리케이션을 개발할 때 효율적으로 사용할 수 있는 강력한 라이브러리입니다. 자세한 사용법은 공식 문서와 예제를 참고하여 학습하시면 됩니다.

© 2018 Colin. All rights reserved.