Fabric.js는 사용자가 캔버스 위에 그래픽 객체를 자유롭게 조작할 수 있는 강력한 라이브러리입니다. 그러나 때로는 특정 객체를 삭제하는 것을 제한하고 싶을 수도 있습니다. 이 글에서는 Fabric.js를 사용하여 객체 삭제를 제한하는 방법을 알아보겠습니다.

객체 삭제 제한 설정하기

우선, 특정 객체를 삭제할 수 없도록 설정하려면 해당 객체의 selectable 속성을 false로 설정해야 합니다. 이렇게 하면 사용자가 해당 객체를 선택할 수 없으며, 따라서 삭제할 수도 없게 됩니다.

아래는 Fabric.js로 새로운 객체를 생성하고 삭제 제한을 설정하는 예제입니다.

// Fabric.js 캔버스 생성
var canvas = new fabric.Canvas('canvas');

// 새로운 사각형 객체 생성
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  fill: 'blue',
  selectable: true // 선택 가능한 상태로 설정
});

// 객체 캔버스에 추가
canvas.add(rect);

위 예제에서 rect 객체의 selectable 속성을 true로 설정하여 사용자가 이 객체를 선택할 수 있도록 했습니다.

객체 삭제 제한 확인하기

이제 삭제 제한이 설정되었는지 확인하기 위해 객체가 삭제되기 전에 이벤트를 감지할 수 있습니다. Fabric.js에서는 before:selection:cleared 이벤트를 사용하여 삭제할 객체를 사전에 확인할 수 있습니다.

아래는 before:selection:cleared 이벤트를 사용하여 삭제 제한을 확인하는 예제입니다.

canvas.on('before:selection:cleared', function(options) {
  var deselectedObjects = options.deselected;
  
  // 삭제 제한된 객체인지 확인
  if (deselectedObjects[0].get('selectable') === false) {
    alert('이 객체는 삭제할 수 없습니다!');
    // 삭제를 막기 위해 다시 선택 상태로 되돌림
    canvas.setActiveObject(deselectedObjects[0]);
  }
});

위 예제에서는 before:selection:cleared 이벤트를 감지하여 삭제 제한된 객체가 선택 해제될 때마다 알림을 표시합니다. 그리고 setActiveObject()를 사용하여 객체를 다시 선택 가능한 상태로 되돌립니다.

이제 Fabric.js를 사용하여 객체의 삭제를 제한할 수 있습니다. 위의 예제를 참고하여 원하는 기능을 구현해보세요!

결론

Fabric.js를 사용하면 캔버스 위의 객체를 자유롭게 조작할 수 있습니다. 객체 삭제를 제한하고 싶을 때는 selectable 속성을 false로 설정하면 됩니다. 또한 before:selection:cleared 이벤트를 이용하여 삭제 제한을 확인할 수 있습니다. 이를 활용하여 사용자의 조작 범위를 제한하는 기능을 구현해보세요.