Fabric.js는 HTML5 캔버스를 위한 엔진으로, 동적인 그래픽을 생성하고 조작할 수 있습니다. 객체 선택은 Fabric.js에서 매우 중요한 기능 중 하나이며, 사용자가 그래픽 객체를 클릭하거나 터치하여 편집할 수 있도록 합니다.

이번 글에서는 Fabric.js를 사용하여 객체의 선택 여부를 설정하는 방법에 대해 알아보겠습니다.

먼저, Fabric.js를 사용하기 위해 HTML 문서에 라이브러리를 추가해야 합니다.

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

이제 선택 여부를 설정하고자 하는 객체를 생성하고 초기화합니다. 이 예제에서는 사각형 객체를 생성하고, 선택 가능하도록 설정하겠습니다.

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

var rect = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  fill: 'red',
  selectable: true // 선택 가능하도록 설정
});

canvas.add(rect);

객체의 selectable 속성을 true로 설정하면 선택이 가능하며, false로 설정하면 선택이 불가능해집니다. 기본적으로 모든 객체는 선택 가능하도록 설정되어 있습니다.

이제 객체를 클릭하거나 터치하여 선택 여부를 변경해보겠습니다. 이를 위해 canvas.on('selection:created') 이벤트와 canvas.on('selection:cleared') 이벤트를 사용합니다.

canvas.on('selection:created', function(event) {
  var selectedObject = event.target;
  console.log('선택된 객체:', selectedObject);
});

canvas.on('selection:cleared', function(event) {
  console.log('선택 해제됨');
});

객체가 선택되었을 때는 selection:created 이벤트가 발생하며, 선택 해제되었을 때는 selection:cleared 이벤트가 발생합니다. 이벤트 핸들러에서 선택 여부에 따라 원하는 동작을 수행할 수 있습니다.

이제 앞서 생성한 사각형 객체를 클릭해보면, 콘솔에 해당 객체 정보가 출력되는 것을 확인할 수 있습니다.

Fabric.js를 사용하여 객체의 선택 여부를 설정하는 방법에 대해서 알아보았습니다. 선택 가능한 객체를 생성하고, 이벤트를 사용하여 선택 여부를 체크할 수 있습니다. 자세한 내용은 Fabric.js 공식 문서를 참고하시기 바랍니다.