Fabric.js는 JavaScript 기반의 오픈 소스 라이브러리로, 웹에서 캔버스 기반의 그래픽을 렌더링하고 편집할 수 있는 기능을 제공합니다. 이번 포스트에서는 Fabric.js를 사용하여 도형을 선택하고 편집하는 방법에 대해 살펴보겠습니다.

1. Fabric.js 설치

먼저 Fabric.js를 설치해야 합니다. npm을 사용하여 다음 명령어를 실행합니다.

npm install fabric

2. 캔버스 생성 및 기본 설정

Fabric.js를 사용하여 캔버스를 생성하고 기본 설정을 해줍니다. 다음은 이 과정을 거치는 예시 코드입니다.

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

// 캔버스 크기 설정
canvas.setDimensions({
  width: 800,
  height: 600
});

// 편집 모드 설정
canvas.isDrawingMode = true; // 그리기 모드
canvas.selection = true; // 선택 가능하도록 설정

3. 도형 생성 및 편집

3.1 도형 생성

Fabric.js에서 도형을 생성하기 위해 fabric.Object 클래스를 사용합니다. 다음은 사각형을 생성하는 예시 코드입니다.

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

// 캔버스에 도형 추가
canvas.add(rect);

위 코드에서 left와 top은 도형의 위치, width와 height는 도형의 크기, fill은 도형의 색상을 나타내는 속성입니다.

3.2 도형 선택 및 편집

Fabric.js를 사용하여 도형을 선택하고 편집하기 위해 다음 메서드를 사용할 수 있습니다.

• canvas.setActiveObject(object): 지정한 객체를 선택상태로 설정합니다.
• canvas.getActiveObject(): 현재 선택한 객체를 반환합니다.
• canvas.discardActiveObject(): 선택한 객체를 취소합니다.
• canvas.remove(object): 객체를 캔버스에서 삭제합니다.

이를 활용하여 도형을 선택하고 편집하는 예시 코드는 다음과 같습니다.

// 도형 선택
canvas.on('mouse:down', function(event) {
  const shape = event.target; // 선택된 도형 객체

  if (shape) {
    shape.set({ fill: 'blue' }); // 선택된 도형 색상 변경
    canvas.setActiveObject(shape); // 선택한 도형을 선택상태로 설정
  } else {
    canvas.discardActiveObject(); // 선택한 도형이 없으면 선택상태 취소
  }

  canvas.renderAll();
});

// 도형 삭제
document.getElementById('deleteButton').addEventListener('click', function() {
  const activeObject = canvas.getActiveObject();
  if (activeObject) {
    activeObject.remove(); // 선택한 도형 삭제
    canvas.renderAll();
  }
});

위 코드에서 mouse:down 이벤트를 사용하여 사용자가 도형을 클릭하면 해당 도형을 선택하고 색상을 변경합니다. 선택한 도형을 삭제하기 위해 ‘Delete’ 버튼을 클릭하는 예시 코드도 함께 제공했습니다.

마무리

Fabric.js를 사용하여 캔버스에서 도형을 선택하고 편집하는 방법을 알아보았습니다. Fabric.js에는 다양한 기능과 메서드가 제공되므로, 필요에 따라 자세한 공식 문서를 참고하시기 바랍니다.

참고 자료

• Fabric.js 공식 문서