Fabric.js는 HTML5 캔버스 기반의 자바스크립트 라이브러리로, 다양한 그래픽 객체를 생성하고 편집할 수 있습니다. 이 라이브러리를 사용하면 사용자가 캔버스 상에서 객체의 위치, 크기, 속성 등을 자유롭게 변경할 수 있습니다. 그러나 때로는 특정 객체를 사용자로부터 변경이 불가능하도록 설정해야 할 때가 있을 수 있습니다. 이번 블로그 포스트에서는 Fabric.js로 객체의 변경 가능 여부를 설정하는 방법에 대해 알아보겠습니다.

객체의 변경 가능 여부를 설정하는 방법

Fabric.js에서는 set 메서드를 사용하여 객체의 속성을 변경할 수 있습니다. 이 메서드의 두 번째 매개변수를 사용하여 객체의 변경 가능 여부를 설정할 수 있습니다. 매개변수로 해당 속성 이름과 함께 false 값을 전달하면, 해당 속성은 읽기 전용으로 설정됩니다. 다음은 예시 코드입니다.

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

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

canvas.add(rect);

// 객체의 변경 가능 여부 설정
rect.set('lockMovementX', true); // X축 이동 불가능
rect.set('lockMovementY', true); // Y축 이동 불가능
rect.set('lockRotation', true); // 회전 불가능
rect.set('lockScalingX', true); // X축 크기 조절 불가능
rect.set('selectable', false); // 선택 불가능

canvas.renderAll();

이 예시 코드에서는 fabric.Rect를 이용하여 캔버스에 사각형을 추가하고 있습니다. rect 객체의 set 메서드를 사용하여 lockMovementX, lockMovementY, lockRotation, lockScalingX, selectable 속성을 설정하고 있습니다. 이렇게 설정된 속성은 사용자에게서 변경되지 않으며, 읽기 전용으로 동작합니다.

결론

Fabric.js를 사용하여 캔버스 상의 객체를 편집할 때, 특정 객체의 변경 가능 여부를 제한하고 싶을 때는 set 메서드를 이용하여 해당 속성을 읽기 전용으로 설정할 수 있습니다. 이를 통해 원하는 객체의 상태를 유지하고 원치 않는 변경을 방지할 수 있습니다.

References

Fabric.js 공식 문서: http://fabricjs.com/docs/