[javascript] Fabric.js로 타원 그리기

30 Nov 2023

javascript

Fabric.js는 HTML5 캔버스를 위한 자바스크립트 라이브러리이며, 다양한 도형 그리기와 편집 기능을 제공합니다. 이번 포스트에서는 Fabric.js를 사용하여 타원을 그리는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치

먼저, Fabric.js를 사용하기 위해 필요한 패키지를 설치해야 합니다.

npm install fabric

2. 타원 그리기

다음은 Fabric.js를 사용하여 타원을 그리는 예제 코드입니다.

// HTML 캔버스 요소 생성
const canvas = new fabric.Canvas('canvas');

// 타원 생성
const ellipse = new fabric.Ellipse({
  left: 100,
  top: 100,
  rx: 50, // x축 반지름
  ry: 30, // y축 반지름
  fill: 'red', // 채우기 색상
  stroke: 'black', // 테두리 색상
  strokeWidth: 2 // 테두리 두께
});

// 캔버스에 타원 추가
canvas.add(ellipse);

위의 코드에서 fabric.Ellipse을 사용하여 타원 객체를 생성하고, 필요한 속성들을 설정합니다. rx는 x축 반지름을, ry는 y축 반지름을 의미합니다. 또한, fill 속성을 사용하여 채우기 색상을 지정하고, stroke 속성을 사용하여 테두리 색상을 지정할 수 있습니다.

생성한 타원을 캔버스에 추가하기 위해서는 canvas.add() 메서드를 사용합니다.

3. 실행하기

위의 예제 코드를 HTML 파일에 추가하고, canvas ID를 가진 캔버스 요소를 생성해야 합니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Fabric.js로 타원 그리기</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <script src="script.js"></script>
</body>
</html>

위의 코드에서 fabric.js 스크립트를 로드해야 하며, script.js 파일에 위의 예제 코드를 작성해야 합니다.

결론

Fabric.js를 사용하여 타원을 그리는 방법에 대해 알아보았습니다. Fabric.js를 사용하면 간단하게 다양한 도형을 그리고 편집할 수 있습니다. 추가적으로 Fabric.js의 다른 기능과 속성에 대해서도 알아보시기 바랍니다.

참고 링크: