[javascript] Fabric.js 설치 방법

30 Nov 2023

javascript

Fabric.js는 JavaScript 기반의 오픈소스 캔버스 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에서 그래픽 요소를 조작하고 렌더링할 수 있습니다. 이제 Fabric.js를 설치하는 방법에 대해 알아보겠습니다.

npm을 통한 설치

Fabric.js를 사용하기 위해 npm(Node Package Manager)을 통해 설치해 보겠습니다. npm은 일반적으로 Node.js를 설치하면 함께 제공됩니다. 다음 명령을 사용하여 Fabric.js를 설치합니다.

$ npm install fabric

CDN을 통한 설치

Fabric.js를 바로 사용하고 싶다면 CDN(Content Delivery Network)을 통해 설치할 수도 있습니다. 다음 스크립트 태그를 HTML 문서의 <head> 태그 안에 추가하면 됩니다.

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

기본 사용 예제

Fabric.js를 설치했다면 이제 간단한 예제를 통해 사용해 볼 수 있습니다. 다음 코드는 Fabric.js를 사용하여 원을 그리고 캔버스에 추가하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.1/fabric.min.js"></script>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script>
        var canvas = new fabric.Canvas('canvas');

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

        canvas.add(circle);
    </script>
</body>
</html>

위의 코드를 HTML 파일로 저장하고 브라우저에서 열면 원이 그려진 캔버스를 확인할 수 있습니다.

이제 Fabric.js를 성공적으로 설치했으며, 각종 그래픽 요소를 조작하고 렌더링할 수 있게 되었습니다. Fabric.js에 대한 추가적인 자세한 내용은 공식 문서를 참조하시기 바랍니다.