[javascript] Fabric.js로 선 그리기

30 Nov 2023

javascript

Fabric.js는 HTML5 캔버스를 기반으로 동작하는 JavaScript 라이브러리로, 그래픽 요소를 쉽게 조작하고 제어할 수 있는 강력한 기능을 제공합니다. 이번에는 Fabric.js를 사용하여 캔버스 위에 선을 그리는 방법에 대해 알아보겠습니다.

캔버스 준비하기

먼저 HTML 파일에서 Fabric.js를 로드하고 캔버스 요소를 생성해야 합니다. 아래 예제를 참고하여 작성해보세요.

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

선 그리기

이제 Fabric.js를 사용하여 선을 그려보겠습니다. 아래 예제 코드를 살펴봅시다.

const canvas = new fabric.Canvas('myCanvas'); // 캔버스 가져오기

const line = new fabric.Line([50, 50, 150, 150], { // 시작점과 끝점 좌표로 선 생성
  fill: 'red', // 색상
  strokeWidth: 5 // 선의 두께
});

canvas.add(line); // 캔버스에 선 추가

위의 코드는 캔버스 위에 시작점 (50, 50)과 끝점 (150, 150)을 가진 빨간색 선을 그리는 예제입니다. fabric.Line 생성자의 첫 번째 매개변수로 시작점과 끝점의 좌표를 배열로 전달하고, 두 번째 매개변수로 선의 색상과 두께를 설정할 수 있습니다.

위의 예제를 실행하면 캔버스에 선이 그려집니다.

결과 확인하기

작성한 코드를 웹 브라우저에서 실행하여 결과를 확인해보세요. 선이 정상적으로 그려지는 것을 확인할 수 있을 것입니다.

Fabric.js는 그래픽 요소를 다양하게 조작할 수 있는 기능을 제공하므로, 선 외에도 사각형, 원 등 다른 그래픽 요소도 그릴 수 있습니다. 필요에 따라 Fabric.js의 다른 기능을 함께 활용하면 더욱 다양한 그래픽 요소를 그릴 수 있습니다.

캔버스 준비하기

선 그리기

결과 확인하기

참고 자료