Fabric.js는 HTML5 캔버스 요소를 사용하여 그래픽을 그리고 조작하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하면 사용자가 웹 페이지에서 그림을 그릴 수 있는 도구를 만들 수 있습니다. 이번 포스트에서는 Fabric.js를 사용하여 펜과 브러시 도구를 추가하는 방법에 대해 알아보겠습니다.
Fabric.js 설치하기
Fabric.js를 사용하기 위해서는 먼저 해당 라이브러리를 설치해야 합니다. 아래의 명령어를 사용하여 npm을 통해 Fabric.js를 설치하세요:
npm install fabric
펜 도구 추가하기
펜 도구는 사용자가 그림을 그릴 때 자유롭게 움직이는 선을 생성하는 도구입니다. 이를 구현하기 위해 Fabric.js에는 Path 클래스를 사용합니다.
아래의 예제 코드는 펜 도구를 추가하는 방법을 보여줍니다:
const canvas = new fabric.Canvas('canvas');
function enablePenTool() {
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 5;
canvas.freeDrawingBrush.color = 'black';
}
function disablePenTool() {
canvas.isDrawingMode = false;
}
이 코드에서 canvas 변수는 Fabric.js로 생성한 캔버스 객체를 참조합니다. enablePenTool 함수는 펜 도구를 활성화하고, disablePenTool 함수는 펜 도구를 비활성화합니다. 펜 도구를 사용할 때는 isDrawingMode 속성을 true로 설정하고, freeDrawingBrush 속성을 사용하여 펜의 굵기와 색상을 설정할 수 있습니다.
브러시 도구 추가하기
브러시 도구는 사용자가 그림을 그릴 때 더 폭이 있는 선을 생성하는 도구입니다. Fabric.js에서는 Pencil 클래스를 사용하여 브러시 도구를 구현할 수 있습니다.
아래의 예제 코드는 브러시 도구를 추가하는 방법을 보여줍니다:
const canvas = new fabric.Canvas('canvas');
function enableBrushTool() {
canvas.isDrawingMode = true;
canvas.freeDrawingBrush.width = 10;
canvas.freeDrawingBrush.color = 'blue';
canvas.freeDrawingBrush.strokeWidth = 2;
}
function disableBrushTool() {
canvas.isDrawingMode = false;
}
펜 도구와 비슷하게, enableBrushTool 함수는 브러시 도구를 활성화하고, disableBrushTool 함수는 브러시 도구를 비활성화합니다. freeDrawingBrush 속성을 사용하여 브러시의 굵기, 색상 및 선의 굵기를 설정할 수 있습니다.
마치며
Fabric.js를 사용하여 펜과 브러시 도구를 추가하는 방법에 대해 알아보았습니다. 이러한 도구를 사용하여 사용자가 웹 페이지에서 그림을 그릴 수 있게 됩니다. Fabric.js는 다양한 다른 기능과 도구도 제공하므로, 관련 문서를 참고하여 자신만의 그림판 애플리케이션을 만들어보세요.