[javascript] Fabric.js로 바탕화면 이미지의 스케일 조절하기

30 Nov 2023

javascript

Fabric.js는 JavaScript 기반의 HTML5 캔버스 라이브러리입니다. 이 라이브러리를 사용하여 바탕화면 이미지의 스케일을 조절하는 방법을 알아보겠습니다.

설치

먼저, Fabric.js를 설치해야 합니다. npm을 사용한다면 다음 명령어를 실행하세요.

npm install fabric

HTML 파일에 직접 스크립트를 추가하는 경우, 다음과 같이 CDN을 사용하여 Fabric.js를 추가할 수 있습니다.

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

바탕화면 이미지 스케일 조절하기

Fabric.js를 사용하여 바탕화면 이미지의 스케일을 조절하는 방법은 다음과 같습니다.

// 캔버스 생성
const canvas = new fabric.Canvas('canvas');

// 바탕화면 이미지 추가
const backgroundImage = new fabric.Image.fromURL('background.jpg', (img) => {
  img.set({
    // 스케일 초기값 설정
    scale: 1
  });
  canvas.setBackgroundImage(img);
  canvas.renderAll();
});

// 스케일 조절 버튼 클릭 이벤트 처리
document.getElementById('scale-in').addEventListener('click', () => {
  backgroundImage.scale(backgroundImage.scaleX * 1.1);
  canvas.renderAll();
});

document.getElementById('scale-out').addEventListener('click', () => {
  backgroundImage.scale(backgroundImage.scaleX * 0.9);
  canvas.renderAll();
});

위 코드에서는 fabric.Canvas 객체를 생성하여 캔버스를 만들고, fabric.Image.fromURL 메서드를 사용하여 바탕화면 이미지를 로드합니다. set 메서드를 사용하여 이미지의 초기 스케일값을 설정합니다.

그리고 버튼에 클릭 이벤트를 추가하여 스케일을 조절합니다. 버튼 클릭 이벤트 핸들러에서 scale 메서드를 사용하여 이미지의 스케일을 변경하고, renderAll 메서드를 호출하여 변경된 스케일을 적용합니다.

결론

Fabric.js를 사용하면 JavaScript로 바탕화면 이미지의 스케일을 조절할 수 있습니다. 이를 활용하여 사용자가 원하는 크기로 이미지를 확대 또는 축소할 수 있습니다. Fabric.js의 다양한 기능을 활용하여 웹 애플리케이션에 사용자 친화적인 인터페이스를 구현해보세요.

참고: