[javascript] Fabric.js로 도형의 면적 계산하기

30 Nov 2023

Fabric.js는 자바스크립트에서 캔버스를 다루기 위한 라이브러리입니다. 이번 글에서는 Fabric.js를 사용하여 도형의 면적을 계산하는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치하기

Fabric.js를 사용하기 위해서는 먼저 설치해야 합니다. HTML 파일 안에 다음과 같이 스크립트 태그를 추가하여 Fabric.js를 불러옵니다.

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

먼저 Fabric.js를 사용하여 캔버스를 생성합니다. 다음 예제 코드를 참고하세요.

const canvas = new fabric.Canvas('canvas');

위 코드에서 ‘canvas’는 캔버스가 그려질 HTML 요소의 id값입니다. 이 요소를 만들어준 후에 위 코드를 실행하면 캔버스가 생성됩니다.

Fabric.js는 다양한 도형을 생성할 수 있습니다. 예를 들어 사각형을 생성해보겠습니다.

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

canvas.add(rect);

위 코드에서 left, top은 사각형의 위치를 나타내며, width와 height는 사각형의 크기를 나타냅니다. fill은 사각형의 색상을 지정할 수 있습니다. 마지막으로 canvas.add() 함수를 사용하여 사각형을 캔버스에 추가합니다.

이제 생성한 도형의 면적을 계산해보겠습니다. Fabric.js는 도형의 속성 중에서 width와 height를 사용하여 면적을 계산할 수 있습니다.

const area = rect.width * rect.height;
console.log('도형의 면적:', area);

위 코드에서는 사각형의 width와 height를 곱하여 면적을 계산하고, console.log() 함수를 사용하여 면적을 출력합니다.

위에서 작성한 코드를 실행하여 면적이 제대로 계산되는지 확인해봅시다. 이를 위해 HTML 파일에 다음과 같이 캔버스를 그릴 공간을 만들어줍니다.

<canvas id="canvas" width="400" height="300"></canvas>

위 코드에서 width와 height는 캔버스의 크기를 나타냅니다. 원하는 크기로 값을 조절해주세요.

이제 작성한 자바스크립트 코드를 실행하면 캔버스 위에 빨간색 사각형이 그려지고, 콘솔에 도형의 면적이 출력됩니다.