Fabric.js는 HTML5 캔버스를 쉽게 조작할 수 있는 자바스크립트 라이브러리입니다. 이번 포스트에서는 Fabric.js를 사용하여 도형의 포인트를 조작하는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치하기

Fabric.js를 사용하기 위해서는 먼저 Fabric.js를 설치해야 합니다. 다음 명령어를 사용하여 Fabric.js를 설치할 수 있습니다.

npm install fabric

2. 기본 도형 생성하기

Fabric.js를 사용하여 도형을 생성하기 위해서는 먼저 Canvas 객체를 생성해야 합니다. 다음 코드는 HTML에 캔버스 엘리먼트를 추가하고, 해당 엘리먼트를 이용하여 Fabric.js의 Canvas 객체를 생성하는 예제입니다.

<canvas id="canvas"></canvas>

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

이제 Canvas 객체를 이용하여 원, 사각형, 삼각형과 같은 도형을 생성할 수 있습니다. 다음 코드는 원과 사각형을 생성하는 예제입니다.

const circle = new fabric.Circle({
  radius: 50,
  fill: 'red',
  left: 100,
  top: 100
});

const rectangle = new fabric.Rect({
  width: 100,
  height: 50,
  fill: 'blue',
  left: 200,
  top: 200
});

canvas.add(circle, rectangle);

3. 도형의 포인트 조작하기

Fabric.js를 사용하여 도형의 포인트를 조작하기 위해서는 objectControls 속성을 설정해야 합니다. 이 속성은 도형에 대한 컨트롤을 정의합니다. 다음 코드는 객체 컨트롤을 사용하여 도형의 포인트를 조작하는 예제입니다.

circle.set({
  objectControls: {
    tl: true, // 위쪽 왼쪽 포인트
    br: true, // 아래쪽 오른쪽 포인트
  }
});

rectangle.set({
  objectControls: {
    ml: true, // 가운데 왼쪽 포인트
    mr: true, // 가운데 오른쪽 포인트
    mt: true, // 위쪽 가운데 포인트
    mb: true // 아래쪽 가운데 포인트
  }
});

canvas.renderAll();

이렇게 설정된 객체 컨트롤을 클릭하고 드래그하여 도형의 포인트를 조작할 수 있습니다.

4. 포인트 조작 이벤트 처리하기

Fabric.js를 사용하여 도형의 포인트를 조작하는 동안 발생하는 이벤트를 처리할 수 있습니다. 다음 코드는 도형의 포인트 조작 이벤트를 처리하는 예제입니다.

circle.on('modified', function() {
  console.log('원의 포인트 조작 완료');
});

rectangle.on('modified', function() {
  console.log('사각형의 포인트 조작 완료');
});

이벤트 핸들러 함수 내에서 필요한 작업을 수행할 수 있습니다.

마치며

이번 포스트에서는 Fabric.js를 사용하여 도형의 포인트를 조작하는 방법을 알아보았습니다. Fabric.js는 다양한 캔버스 조작 기능을 제공하므로, 캔버스 기반의 웹 애플리케이션을 개발할 때 유용하게 사용될 수 있습니다. 추가적인 기능과 사용법은 Fabric.js 공식 문서를 참고하시기 바랍니다.

참고 자료

• Fabric.js 공식 문서