Fabric.js는 HTML5 캔버스를 위한 JavaScript 라이브러리로, 도형을 그리고 이동시키고 크기를 조절하는 등의 다양한 작업을 할 수 있습니다. 이번 글에서는 Fabric.js를 사용하여 도형을 이동시키고 크기를 조절하는 방법에 대해 알아보겠습니다.

1. Fabric.js 설치하기

먼저, Fabric.js를 사용하기 위해 해당 라이브러리를 다운로드하거나 CDN을 이용하여 추가해야 합니다. 다음과 같이 HTML 파일의 head 태그 안에 아래 코드를 추가합니다.

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

2. 캔버스 생성하기

Fabric.js를 사용하여 도형을 그리기 위해 먼저 캔버스를 생성해야 합니다. HTML 파일에 다음과 같이 캔버스를 생성하는 코드를 추가합니다.

<canvas id="myCanvas"></canvas>

3. 도형 그리기

생성한 캔버스 위에 도형을 그리기 위해 Fabric.js의 fabric.Canvas 객체를 생성합니다. 다음 코드는 캔버스 위에 사각형을 그리는 예시입니다.

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

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

canvas.add(rect);

위 코드에서 fabric.Rect 객체를 생성하여 사각형을 정의하고, canvas.add() 메서드를 사용하여 그림을 그립니다. left와 top 속성은 사각형의 위치를 지정하고, width와 height 속성은 사각형의 크기를 지정합니다.

4. 도형 이동하기

이제 생성된 도형을 이동시키는 방법에 대해 알아보겠습니다. Fabric.js는 마우스 이벤트를 이용하여 도형을 드래그하여 이동시킬 수 있습니다. 다음 코드는 도형을 이동시키는 예시입니다.

rect.on('mousedown', function(event) {
  canvas.on('mouse:move', function(event) {
    rect.left = event.e.clientX;
    rect.top = event.e.clientY;
    canvas.requestRenderAll();
  });
});

canvas.on('mouse:up', function(event) {
  canvas.off('mouse:move');
});

위 코드에서는 마우스를 누를 때(mousedown) 도형의 이동을 시작하고, 마우스를 뗄 때(mouseup) 이동을 종료합니다. mouse:move 이벤트를 이용하여 도형의 left와 top 속성을 마우스의 좌표로 업데이트하고, canvas.requestRenderAll() 메서드를 호출하여 화면을 다시 렌더링합니다.

5. 도형 크기 조절하기

도형의 크기를 조절하기 위해서는 Fabric.js의 setControlsVisibility() 메서드와 setControlVisible() 메서드를 사용할 수 있습니다. 다음 코드는 도형의 크기를 조절하는 예시입니다.

canvas.setControlsVisibility({
  tl: true, // top-left
  tr: true, // top-right
  br: true, // bottom-right
  bl: true, // bottom-left
  ml: false, // middle-left
  mt: false, // middle-top
  mr: false, // middle-right
  mb: false // middle-bottom
});

rect.setControlVisible('tr', false); // top-right 제거

위 코드에서는 setControlsVisibility() 메서드를 사용하여 보이는 컨트롤(조절점)과 숨길 컨트롤을 설정합니다. 또한, setControlVisible() 메서드를 사용하여 특정 조절점을 숨길 수도 있습니다. 위 코드에서는 tl, tr, br, bl 컨트롤은 보이게 설정하고, tr 컨트롤을 숨깁니다.

마무리

이제 Fabric.js를 사용하여 도형을 이동시키고 크기를 조절하는 방법에 대해 알아보았습니다. 위의 예시를 참고하여 캔버스에 여러 도형을 그리고 이동시키거나 크기를 조절해 보세요. Fabric.js는 강력한 기능을 제공하여 다양한 그래픽 작업을 할 수 있습니다.

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