Fabric.js는 HTML5 캔버스를 위한 자바스크립트 라이브러리로, 그래픽 객체를 생성하고 조작할 수 있는 강력한 기능을 제공합니다. 이번 블로그 포스트에서는 Fabric.js를 사용하여 도형의 포인트를 이동하는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치하기

먼저 Fabric.js를 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하여 설치할 수 있습니다:

npm install fabric

또는 웹 브라우저에서 Fabric.js를 직접 로드하고자 하는 경우, 다음과 같이 <script> 태그를 사용하여 로드할 수 있습니다:

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

2. 도형 생성하기

Fabric.js를 사용하여 간단한 도형을 생성해보겠습니다. 예를 들어 원을 생성하려면 다음과 같이 코드를 작성할 수 있습니다:

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

const circle = new fabric.Circle({
  radius: 50,
  left: 100,
  top: 100,
  fill: 'red'
});

canvas.add(circle);

위 코드에서 fabric.Canvas은 캔버스 객체를 생성하고, fabric.Circle은 원 객체를 생성합니다. canvas.add(circle)를 통해 캔버스에 원을 추가합니다.

3. 포인트 이동하기

이제 원의 포인트를 이동해보겠습니다. Fabric.js는 setControlVisible() 메서드를 사용하여 객체의 포인트를 제어할 수 있습니다. 예를 들어 원의 top 포인트 제어를 활성화하려면 다음과 같이 코드를 작성할 수 있습니다:

circle.setControlVisible('tl', true);
circle.setControlVisible('tr', true);
circle.setControlVisible('bl', true);
circle.setControlVisible('br', true);

위 코드에서 'tl', 'tr', 'bl', 'br'은 각각 왼쪽 상단, 오른쪽 상단, 왼쪽 하단, 오른쪽 하단 포인트를 의미합니다.

위 코드를 실행하면 원의 포인트가 활성화되어 마우스로 이동할 수 있게 됩니다.

4. 도형 이동 이벤트 처리하기

마지막으로, 도형의 포인트 이동 이벤트를 처리해보겠습니다. Fabric.js는 object:moving 이벤트를 통해 객체의 이동 상태를 감지할 수 있습니다. 이벤트 리스너를 추가하여 포인트 이동 시 어떤 동작을 수행할지 정의할 수 있습니다. 예를 들어, 원의 포인트가 이동할 때마다 콘솔에 해당 포인트의 좌표를 표시하려면 다음과 같이 코드를 작성할 수 있습니다:

canvas.on('object:moving', function(e) {
  const target = e.target;
  const point = e.pointer;

  console.log(`Moving point - ${target.name}: x:${point.x}, y:${point.y}`);
});

위 코드에서 e.target은 이벤트 대상 객체를, e.pointer는 마우스 포인터의 좌표를 나타냅니다.

이제 원의 포인트를 이동할 때마다 콘솔에 좌표가 출력될 것입니다.

결론

이번 포스트에서는 Fabric.js를 사용하여 도형의 포인트를 이동하는 방법을 알아보았습니다. Fabric.js는 그래픽 객체를 쉽게 생성하고 조작할 수 있는 강력한 도구입니다. 추가적인 정보 및 사용 예제는 Fabric.js 공식 문서를 참조하시기 바랍니다.

• Fabric.js 공식 문서

이상으로 Fabric.js를 활용한 도형의 포인트 이동에 대해 알아보았습니다. 감사합니다!