[javascript] Fabric.js로 캔버스 확대/축소하기
Fabric.js는 웹 애플리케이션에서 쉽게 캔버스를 조작할 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하면 사용자 인터페이스에서 캔버스를 확대 또는 축소할 수 있습니다.
캔버스 확대/축소 구현하기
먼저, Fabric.js를 프로젝트에 추가해야 합니다. 이를 위해 HTML 문서에 다음과 같이 스크립트 태그를 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
다음으로, 캔버스를 생성하고 초기화합니다.
// HTML 문서에서 캔버스 요소를 가져옵니다.
const canvasElement = document.getElementById('canvas');
// Fabric.js를 사용해 캔버스 인스턴스를 생성합니다.
const canvas = new fabric.Canvas(canvasElement);
이제, 사용자 인터페이스에서 확대/축소를 처리할 버튼 등의 요소를 추가합니다.
<button id="zoom-in">+</button>
<button id="zoom-out">-</button>
// 확대 버튼 클릭 이벤트 처리
document.getElementById('zoom-in').addEventListener('click', function() {
const zoom = canvas.getZoom();
canvas.setZoom(zoom * 1.1);
canvas.renderAll();
});
// 축소 버튼 클릭 이벤트 처리
document.getElementById('zoom-out').addEventListener('click', function() {
const zoom = canvas.getZoom();
canvas.setZoom(zoom / 1.1);
canvas.renderAll();
});
위의 코드는 확대/축소 버튼 클릭 시 현재 캔버스의 줌 레벨을 1.1배 증가/감소시키는 간단한 예제입니다. 필요에 따라 줌 레벨을 다양하게 설정할 수 있습니다.