캔버스와 함께 사용되는 Fabric.js 소개

13 Oct 2023

Fabric.js는 HTML5 캔버스를 사용하여 그래픽을 생성하고 조작하는 JavaScript 라이브러리입니다. 캔버스는 웹 페이지에서 그래픽을 그리기 위한 강력한 도구로 널리 사용되며, Fabric.js는 캔버스를 효과적으로 활용할 수 있도록 도와줍니다.

Fabric.js를 사용하면 사용자 정의 도형, 텍스트, 이미지 등의 그래픽 요소를 캔버스에 쉽게 추가할 수 있습니다. 또한 Fabric.js는 이러한 요소들을 드래그 앤 드롭하거나 크기를 조정하고 회전시킬 수 있는 강력한 기능을 제공합니다.

Fabric.js의 주요 기능:

1. 개체 생성 및 조작

Fabric.js를 사용하면 캔버스에 다양한 유형의 개체를 생성하고 조작할 수 있습니다. 예를 들어, 다음과 같은 코드로 네모형 개체를 생성할 수 있습니다:

var square = new fabric.Rect({
  left: 100,
  top: 100,
  width: 200,
  height: 200,
  fill: 'red'
});
canvas.add(square);

위의 코드에서 fabric.Rect는 네모형 개체를 생성하는 Fabric.js의 내장 클래스입니다. canvas.add() 함수를 사용하여 생성한 개체를 캔버스에 추가할 수 있습니다.

Fabric.js를 사용하면 생성한 도형을 쉽게 업데이트하고 조작할 수 있습니다. 예를 들어, 다음과 같은 코드로 네모형의 색상을 변경할 수 있습니다:

square.set('fill', 'blue');
canvas.renderAll();

위의 코드에서 square.set() 함수를 사용하여 네모형 개체의 속성 중 ‘fill’을 변경하고, canvas.renderAll() 함수를 사용하여 캔버스를 다시 렌더링합니다.

Fabric.js를 사용하면 캔버스에서 발생하는 다양한 이벤트를 처리할 수 있습니다. 예를 들어, 다음과 같은 코드로 캔버스의 클릭 이벤트를 처리할 수 있습니다:

canvas.on('mouse:down', function(options) {
  var pointer = canvas.getPointer(options.e);
  console.log('x: ' + pointer.x + ', y: ' + pointer.y);
});

위의 코드에서 canvas.on() 함수를 사용하여 ‘mouse:down’ 이벤트를 처리하고, 이벤트 핸들러 내에서 마우스 포인터의 위치를 얻어와 콘솔에 출력합니다.

Fabric.js는 공식 문서와 예제 코드 등 다양한 리소스를 제공하고 있으므로, 확인하고 싶은 경우에는 해당 리소스를 참고하시기 바랍니다.

기타 참고자료:

#fabricjs #캔버스