Fabric.js는 HTML5 캔버스를 위한 강력한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 웹 애플리케이션에서 그래픽 요소들을 쉽게 조작하고 효과를 적용할 수 있습니다. 이번에는 Fabric.js를 사용하여 객체의 회전을 제한하는 방법에 대해 알아보겠습니다.

회전 제한 구현하기

Fabric.js에서는 angle 속성을 사용하여 객체의 회전을 조절할 수 있습니다. 이 속성을 이용하여 회전 각도를 제한하는 방법은 다음과 같습니다:

// 객체 생성
var rect = new fabric.Rect({
  width: 100,
  height: 100,
  left: 100,
  top: 100,
  fill: 'red',
  angle: 0 // 초기 각도 설정
});
canvas.add(rect);

// 회전 각도 제한
rect.on('moving', function() {
  var currentAngle = rect.angle % 360; // 현재 회전 각도
  if (currentAngle < 0) {
    currentAngle += 360; // 음수인 경우 양수로 변환
  }
  rect.angle = currentAngle; // 회전 각도 갱신
});

위의 예제에서는 사각형 객체를 생성하고 angle 속성을 이용하여 초기 회전 각도를 0으로 설정하였습니다. moving 이벤트를 사용하여 객체가 이동할 때마다 현재 각도를 확인하고 음수인 경우 양수로 변환하여 회전 각도를 제한합니다.

추가적인 회전 제한 조건

만약 회전을 제한하는 추가적인 조건이 필요하다면, 필요한 로직을 moving 이벤트 핸들러에 추가할 수 있습니다. 예를 들어, 특정 각도 이상으로 회전할 수 없도록 제한하고 싶은 경우 다음과 같이 코드를 수정할 수 있습니다:

// 추가적인 회전 제한
rect.on('moving', function() {
  var currentAngle = rect.angle % 360; // 현재 회전 각도
  if (currentAngle < 0) {
    currentAngle += 360; // 음수인 경우 양수로 변환
  }
  if (currentAngle > 90) {
    rect.angle = 90; // 90도를 넘지 않도록 제한
  }
});

위의 예제에서는 객체가 이동할 때마다 현재 각도를 확인하고, 만약 현재 각도가 90도를 초과하는 경우에는 회전 각도를 90도로 고정합니다. 이렇게 함으로써 객체의 회전이 90도를 넘지 않도록 제한할 수 있습니다.

마무리

이번 글에서는 Fabric.js를 사용하여 객체의 회전을 제한하는 방법에 대해 알아보았습니다. Fabric.js는 강력한 기능을 제공하며, 객체의 회전을 제어하는 것도 쉽게 구현할 수 있습니다. 필요한 경우 추가적인 회전 제한 조건을 적용하여 원하는 대로 객체를 조작할 수 있습니다.

더 자세한 내용은 Fabric.js 공식 문서를 참고하시기 바랍니다.