Fabric.js는 JavaScript 기반의 강력한 캔버스 라이브러리입니다. 이 라이브러리를 사용하여 웹 페이지에 캔버스 요소를 만들고 조작할 수 있습니다. 이번 포스팅에서는 Fabric.js를 사용하여 캔버스 객체의 드래그 기능을 활성화하는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치하기

Fabric.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. npm을 이용하여 설치할 수 있습니다.

npm install fabric

2. 캔버스 요소 생성하기

Fabric.js를 사용하여 캔버스 요소를 생성합니다. HTML 파일에서 캔버스 요소를 추가하고, JavaScript 코드를 사용하여 캔버스 객체를 생성합니다.

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

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

3. 드래그 가능성 설정하기

Fabric.js에서는 selectable 속성을 사용하여 객체의 드래그 가능성을 설정할 수 있습니다. selectable 속성을 true로 설정하면 해당 객체를 드래그할 수 있게 됩니다. 기본값은 true입니다.

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

canvas.add(rect);

위의 예제에서는 생성한 사각형 객체 rect의 selectable 속성을 true로 설정하여 드래그 가능한 객체로 만듭니다.

4. 드래그 이벤트 처리하기

Fabric.js에서는 드래그 이벤트를 처리하는 다양한 메서드와 이벤트 핸들러를 제공합니다. 객체의 드래그 시작, 드래그 중, 드래그 종료 등에 대한 이벤트를 처리할 수 있습니다.

rect.on('moving', function(event) {
  console.log('Object is moving!', event.target.left, event.target.top);
});

rect.on('moved', function(event) {
  console.log('Object has been moved!', event.target.left, event.target.top);
});

위의 예제에서는 사각형 객체 rect의 moving 이벤트와 moved 이벤트를 처리하여 객체의 이동 시 좌표를 출력합니다.

5. 결론

Fabric.js를 사용하여 웹 페이지에 캔버스 요소를 만들고, 객체의 드래그 가능성을 설정하는 방법에 대해 알아보았습니다. Fabric.js는 다양한 기능과 이벤트 처리 메서드를 제공하여 캔버스 요소를 동적으로 조작할 수 있습니다. 더 자세한 내용은 Fabric.js 공식 문서를 참고하시기 바랍니다.