Fabric.js는 HTML5 캔버스 위에서 동적인 그래픽을 생성하고 조작할 수 있는 강력한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 도형을 그리고, 이동시키고, 변형시키는 등 다양한 작업을 할 수 있습니다.

이번에는 Fabric.js를 사용하여 도형의 중점에 점을 그려보겠습니다. 이 점은 도형의 중심을 나타내며, 도형이 이동하거나 회전할 때 중점도 함께 이동하거나 회전하게 됩니다.

1. Fabric.js 설치하기

Fabric.js를 사용하기 위해 먼저 설치해야 합니다. npm을 사용하는 경우 아래 명령어를 실행하여 Fabric.js를 설치할 수 있습니다.

npm install fabric

2. HTML에 캔버스 추가하기

도형을 그릴 캔버스를 HTML에 추가해야 합니다. 다음과 같이 <canvas> 요소를 추가합니다.

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

3. 도형 생성하기

먼저 Fabric.js를 사용하여 도형을 생성합니다. 예를 들어 사각형을 생성하려면 아래와 같이 코드를 작성합니다.

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

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

canvas.add(rect);

4. 도형의 중점에 점 그리기

이제 도형의 중점에 점을 그려보겠습니다. Fabric.js에서는 fabric.Circle을 사용하여 원 형태의 점을 그릴 수 있습니다. 도형의 중점은 getCenterPoint 메소드를 사용하여 구할 수 있습니다.

const centerPoint = rect.getCenterPoint();

const point = new fabric.Circle({
  left: centerPoint.x,
  top: centerPoint.y,
  radius: 5,
  fill: 'blue'
});

canvas.add(point);

위 코드에서 rect.getCenterPoint()는 rect 도형의 중점 좌표를 반환합니다. 이 좌표를 사용하여 point 점을 생성하고 캔버스에 추가합니다.

5. 결과 확인하기

위의 코드를 작성하고 브라우저에서 확인해보면, 사각형의 중점에 파란색 점이 그려진 것을 확인할 수 있습니다. 이제 도형을 이동하거나 회전시켜보면 중점의 점도 함께 이동하거나 회전하는 것을 볼 수 있습니다.

마무리

Fabric.js를 사용하여 도형의 중점에 점을 그려보는 방법을 알아보았습니다. 이를 응용하여 다양한 도형을 그리고 중점을 나타내는 점을 추가해보세요. Fabric.js에 대해 더 알고 싶다면 공식 문서를 참고해보세요.