Colin's Blog
[javascript] Fabric.js로 객체의 rotable 조절하기

Fabric.js는 HTML5 캔버스에서 작업할 수 있는 강력한 Javascript 라이브러리입니다. 이 라이브러리를 사용하면 그래픽 요소를 추가하고 편집하는 데 매우 편리합니다. 이번 블로그 포스트에서는 Fabric.js를 사용하여 객체의 회전 가능 속성을 조절하는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치

먼저, Fabric.js를 사용하려면 해당 라이브러리를 설치해야 합니다. npm(Node Package Manager)을 사용하여 설치할 수 있습니다. 아래의 명령어를 사용하여 Fabric.js를 설치합니다.

` npm install fabric \`

2. 기본적인 Fabric.js 틀 만들기

다음으로, Fabric.js를 사용하여 기본적인 캔버스를 만들어 보겠습니다. 다음 코드를 사용하여 HTML 파일을 만들고, 해당 파일을 열어서 확인해 보세요.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Fabric.js로 객체의 rotable(회전 가능) 조절하기</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>
  <script>
    // Canvas 요소 생성
    var canvas = new fabric.Canvas('canvas');
  
    // 사각형 객체 생성
    var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 200,
      height: 200,
      angle: 0, // 초기 회전 각도
      selectable: true, // 선택 가능 여부
      hasRotatingPoint: true // 회전 포인트 사용 여부
    });
  
    // 캔버스에 객체 추가
    canvas.add(rect);
  </script>
</body>
</html>

위의 코드를 실행하면, 빨간색의 사각형이 캔버스 내에 위치하게 됩니다.

3. 객체의 회전 가능 여부 설정

이제 객체의 회전 가능 여부를 설정하는 방법을 알아보겠습니다. hasControls 속성을 사용하여 객체의 회전 및 크기 조절 핸들을 활성화하거나 비활성화할 수 있습니다. 아래의 코드를 사용하여 설정할 수 있습니다.

// hasControls 속성을 false로 설정하여 회전 및 크기 조절 핸들 비활성화
rect.set({
  hasControls: false
});

// hasControls 속성을 true로 설정하여 회전 및 크기 조절 핸들 활성화
rect.set({
  hasControls: true
});

4. 객체의 초기 회전 각도 설정

객체의 초기 회전 각도를 설정하려면 객체 생성 시 angle 속성을 사용하면 됩니다. 아래의 코드를 사용하여 객체의 초기 회전 각도를 설정할 수 있습니다.

// 초기 회전 각도 설정
var rect = new fabric.Rect({
  //...
  angle: 45,
  //...
});

5. 결과 확인하기

위의 코드를 사용하여 객체의 회전 가능 여부와 초기 회전 각도를 설정한 후, 결과를 확인해 보세요. 캔버스의 사각형 객체를 클릭하면 회전 및 크기 조절 핸들이 표시되는 것을 확인할 수 있습니다.

Fabric.js 공식 문서에서 더 자세한 내용을 확인할 수 있습니다.

이렇게 Fabric.js를 사용하여 객체의 rotable(회전 가능) 속성을 조절하는 방법에 대해 알아보았습니다. 다양한 속성을 활용하여 더욱 다양한 기능을 구현해 볼 수 있으니, 참고하여 개발에 활용해 보세요!

© 2018 Colin. All rights reserved.