Fabric.js는 자바스크립트 라이브러리로서 캔버스에 그래픽 요소를 추가하고 조작할 수 있는 기능을 제공합니다. 이번 포스트에서는 Fabric.js를 사용하여 캔버스의 크기를 조절하는 방법에 대해 알아보겠습니다.

캔버스 생성하기

우선 Fabric.js를 사용하여 캔버스를 생성해야 합니다. 다음 코드를 사용하여 캔버스를 생성합니다.

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

위 코드에서 ‘canvas’는 캔버스 요소의 id입니다. 이렇게 생성된 캔버스는 HTML 문서에서 해당 id를 가진 요소에 삽입됩니다.

캔버스 크기 조절하기

캔버스의 크기를 조절하려면 Fabric.js에서 제공하는 setDimensions() 메서드를 사용해야 합니다. 다음 코드를 사용하여 캔버스의 너비와 높이를 조절해보겠습니다.

canvas.setDimensions({ width: 500, height: 300 });

위 코드에서 width는 캔버스의 너비를, height는 캔버스의 높이를 나타냅니다. 이렇게 캔버스의 크기를 조절하면 캔버스에 그려진 요소들도 함께 크기가 조절됩니다.

동적으로 캔버스 크기 조절하기

Fabric.js를 사용하여 캔버스 크기를 동적으로 조절할 수도 있습니다. 사용자 입력이나 다른 이벤트에 따라 캔버스 크기를 조절할 경우에 유용합니다. 다음 코드를 사용하여 캔버스의 크기를 동적으로 조절하는 예제를 살펴보겠습니다.

var resizeCanvas = function() {
  var container = document.getElementById('canvas-container');
  var width = container.offsetWidth;
  var height = container.offsetHeight;

  canvas.setDimensions({ width: width, height: height });
};

// 윈도우의 크기가 변경되면 캔버스 크기도 변경
window.addEventListener('resize', resizeCanvas);

// 초기 캔버스 크기 조절
resizeCanvas();

위 코드에서 canvas-container는 캔버스가 들어갈 요소의 id입니다. resizeCanvas() 함수는 canvas-container 요소의 너비와 높이를 측정하여 캔버스의 크기를 조절하는 역할을 합니다. window의 resize 이벤트를 통해 윈도우의 크기가 변경될 때 마다 캔버스 크기도 변경됩니다.

결론

이렇게 Fabric.js를 사용하여 캔버스의 크기를 조절하는 방법에 대해 알아보았습니다. setDimensions() 메서드를 사용하여 크기를 조절하고, 동적으로 크기를 조절할 수도 있습니다. 캔버스 크기를 조절함으로써 그래픽 요소를 더욱 유연하게 조작할 수 있습니다.

더 자세한 정보는 Fabric.js 공식 문서를 참조하세요.