1. Fabric.js 설치 및 기본 설정

Fabric.js를 사용하려면 먼저 프로젝트에 Fabric.js를 설치해야 합니다. 아래의 명령어로 Fabric.js를 설치할 수 있습니다.

npm install fabric

Fabric.js를 사용하기 위해 HTML 파일에 다음과 같이 script 태그를 추가합니다.

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

2. 도형 만들기

먼저 Fabric.js를 사용하여 도형을 만들어보겠습니다. 아래의 코드를 사용하면 Canvas 위에 원형 도형을 생성할 수 있습니다.

// Canvas 생성
var canvas = new fabric.Canvas('canvas');

// 원형 도형 생성
var circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: 'red'
});

// Canvas에 도형 추가
canvas.add(circle);

위의 코드를 실행하면 Canvas에 원형 도형이 생성됩니다.

3. 회전하기

Fabric.js를 사용하면 도형을 회전할 수 있습니다. 아래의 코드를 사용하여 도형을 45도 회전시킬 수 있습니다.

// 도형 회전
circle.rotate(45);

// Canvas 다시 그리기
canvas.renderAll();

위의 코드를 실행하면 원형 도형이 45도 회전합니다.

4. 대칭 변환하기

Fabric.js를 사용하여 도형을 대칭 변환할 수도 있습니다. 아래의 코드를 사용하면 원형 도형을 수평으로 대칭시킬 수 있습니다.

// 도형 대칭 변환
circle.set('flipX', true);

// Canvas 다시 그리기
canvas.renderAll();

위의 코드를 실행하면 원형 도형이 수평으로 대칭됩니다.

이처럼 Fabric.js를 사용하면 도형을 회전하고 대칭 변환할 수 있습니다. Fabric.js에는 더 다양한 기능이 있으니 공식 문서를 참고하시기 바랍니다.