Fabric.js는 자바스크립트로 캔버스 애플리케이션을 만들기 위한 강력한 라이브러리입니다. 이 블로그 포스트에서는 Fabric.js를 사용하여 캔버스에 그려진 도형의 색상과 불투명도를 조절하는 방법을 알아보겠습니다.

1. Fabric.js 설치하기

먼저, 프로젝트에 Fabric.js를 설치해야 합니다. npm을 사용하는 경우 다음 명령어를 실행하면 됩니다.

npm install fabric

만약 CDN을 사용하고 있는 경우, 다음과 같이 script 태그를 HTML 파일에 추가합니다.

<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-id');

3. 도형 그리기

원하는 도형을 그립니다. 예를 들어, 사각형을 그리는 코드는 다음과 같습니다.

const rect = new fabric.Rect({
  width: 200,
  height: 150,
  fill: 'red',
  opacity: 0.5
});

canvas.add(rect);

위의 코드에서 fill 속성은 도형의 색상을 나타내며, opacity 속성은 불투명도를 나타냅니다. fill 속성은 캔버스에 그려진 도형의 색상을 변경하고, opacity 속성은 그 도형의 불투명도를 조절하는 데 사용됩니다.

4. 도형의 색상과 불투명도 조절하기

도형의 색상과 불투명도를 조절하려면 해당 도형 객체의 fill과 opacity 속성을 변경하면 됩니다. 예를 들어, 다음과 같이 도형을 클릭했을 때 해당 도형의 색상을 변경하고 불투명도를 높일 수 있습니다.

rect.on('selected', () => {
  rect.set('fill', 'blue');
  rect.set('opacity', 1);
  canvas.renderAll();
});

위의 코드에서 selected 이벤트 핸들러에서 rect 객체의 fill과 opacity 속성을 변경하고, canvas.renderAll() 메소드를 호출하여 변경 사항을 적용합니다.

마무리하기

이렇게 Fabric.js를 사용하여 캔버스에 그려진 도형의 색상과 불투명도를 조절하는 방법을 알아보았습니다. Fabric.js는 다양한 기능을 제공하므로, 다양한 도형 및 그래픽 요소를 조작하고 애니메이션을 적용할 수 있습니다. 자세한 내용은 Fabric.js 공식 문서를 참고하시기 바랍니다.