[javascript] Fabric.js로 도형의 영역 선택하기

30 Nov 2023

javascript

Fabric.js는 JavaScript 기반의 브라우저용 캔버스 라이브러리로, 도형과 이미지를 캔버스에 그리고 관리할 수 있습니다. 이 라이브러리를 사용하면 쉽게 도형을 선택하고 조작할 수 있습니다.

이번 포스트에서는 Fabric.js를 사용하여 도형의 영역을 선택하는 방법에 대해 알아보겠습니다.

준비 단계

Fabric.js를 사용하기 위해서는 먼저 필요한 파일을 다운로드하거나 CDN으로 불러와야 합니다. 아래의 스크립트를 <head> 태그 안에 추가해 주세요.

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

도형 생성하기

Fabric.js에서 도형을 생성하려면 먼저 fabric.Canvas 객체를 생성해야 합니다. 그리고 fabric.Rect, fabric.Circle, fabric.Triangle 등의 클래스를 사용하여 도형을 만들 수 있습니다.

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

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

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

const triangle = new fabric.Triangle({
  left: 500,
  top: 300,
  width: 100,
  height: 100,
  fill: 'green'
});

canvas.add(rect, circle, triangle);

위의 코드는 <canvas id="canvas"></canvas> 요소를 선택하여 canvas 객체를 생성하고, fabric.Rect, fabric.Circle, fabric.Triangle을 사용하여 각각 사각형, 원, 삼각형 도형을 생성한 후 캔버스에 추가하는 예제입니다.

도형 영역 선택하기

이제 도형의 영역을 선택하기 위해 Fabric.js에서 제공하는 canvas.setActiveObject() 메서드를 사용합니다. 이 메서드는 선택한 도형을 캔버스의 활성 객체로 설정합니다.

canvas.on('mouse:down', function(event) {
  const target = event.target;
  if (target) {
    canvas.setActiveObject(target);
  }
});

위의 코드는 마우스를 눌렀을 때 발생하는 mouse:down 이벤트를 감지하여 선택한 도형을 활성 객체로 설정합니다. 이제 선택한 도형은 canvas.getActiveObject() 메서드를 사용하여 언제든지 가져올 수 있습니다.

const activeObject = canvas.getActiveObject();
console.log(activeObject);

마무리

Fabric.js를 사용하여 도형의 영역을 선택하는 방법에 대해 알아보았습니다. Fabric.js는 강력한 캔버스 라이브러리로 다양한 도형과 이미지를 다룰 수 있어 많은 프로젝트에서 활용됩니다. 자세한 내용은 Fabric.js 공식 문서를 참고하세요.