Fabric.js는 자바스크립트 기반의 HTML5 캔버스 라이브러리로, 그래픽 요소들을 쉽게 조작하고 이벤트를 처리할 수 있게 해줍니다. 이번 포스트에서는 Fabric.js를 사용하여 클릭, 드래그, 더블 클릭과 같은 이벤트를 처리하는 방법을 알아보겠습니다.

1. 이벤트 리스너 등록하기

Fabric.js를 사용하여 이벤트를 처리하려면 이벤트에 대한 리스너를 등록해야 합니다. 예를 들어, 캔버스에 클릭 이벤트에 대한 리스너를 등록하려면 다음과 같이 합니다.

canvas.on('mouse:down', function(options) {
  // 클릭 이벤트 처리 코드 작성
});

위의 코드에서 mouse:down은 클릭 이벤트를 나타내며, 이벤트가 발생하면 함수가 실행됩니다. options 매개 변수를 통해 이벤트에 대한 정보를 얻을 수 있습니다.

2. 클릭 이벤트 처리하기

클릭 이벤트를 처리하기 위해서는 mouse:down 이벤트를 리스닝하고 처리할 로직을 작성해야 합니다. 예를 들어, 클릭한 위치에 새로운 사각형을 추가하는 코드는 다음과 같습니다.

canvas.on('mouse:down', function(options) {
  var x = options.e.clientX;
  var y = options.e.clientY;
  
  var rect = new fabric.Rect({
    left: x,
    top: y,
    width: 100,
    height: 100,
    fill: 'red'
  });
  
  canvas.add(rect);
});

위의 코드에서는 options.e.clientX와 options.e.clientY를 이용하여 마우스 클릭한 위치를 얻어와서 사각형의 위치를 설정하고, canvas.add()를 통해 캔버스에 사각형을 추가합니다.

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

Fabric.js를 사용하여 드래그 이벤트를 처리하기 위해서는 mouse:move 이벤트와 mouse:up 이벤트를 함께 사용해야 합니다. 예를 들어, 선택한 요소를 드래그하여 이동하는 코드는 다음과 같습니다.

var selectedObject;

canvas.on('mouse:down', function(options) {
  selectedObject = canvas.getActiveObject();
});

canvas.on('mouse:move', function(options) {
  if (selectedObject) {
    var pointer = canvas.getPointer(options.e);
    selectedObject.set({ left: pointer.x, top: pointer.y });
    canvas.renderAll();
  }
});

canvas.on('mouse:up', function(options) {
  selectedObject = null;
});

위의 코드에서 mouse:down 이벤트에서 선택된 요소를 selectedObject 변수에 저장하고, mouse:move 이벤트에서 selectedObject를 이동시킵니다. 마지막으로 mouse:up 이벤트에서 selectedObject를 초기화합니다.

4. 더블 클릭 이벤트 처리하기

더블 클릭 이벤트를 처리하기 위해서는 mouse:dblclick 이벤트를 리스닝하면 됩니다. 예를 들어, 더블 클릭한 요소를 삭제하는 코드는 다음과 같습니다.

canvas.on('mouse:dblclick', function(options) {
  var object = canvas.getActiveObject();
  canvas.remove(object);
  canvas.renderAll();
});

위의 코드에서 mouse:dblclick 이벤트에서 canvas.getActiveObject()를 사용하여 더블 클릭한 요소를 가져온 후, canvas.remove()를 통해 요소를 삭제합니다.

결론

Fabric.js를 사용하면 클릭, 드래그, 더블 클릭과 같은 이벤트를 쉽게 처리할 수 있습니다. 이 글에서는 간단한 예제 코드를 통해 Fabric.js로 이벤트를 처리하는 방법을 알아보았습니다. Fabric.js의 다양한 기능과 메서드를 활용하여 원하는 이벤트 처리를 구현해보세요.

더 많은 정보와 예제 코드는 Fabric.js 공식 문서에서 확인할 수 있습니다.