Fabric.js는 HTML5 캔버스를 효과적으로 다룰 수 있는 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 웹 애플리케이션에서 다양한 그래픽 요소를 조작하고 측정할 수 있습니다. 이번 포스트에서는 Fabric.js를 사용하여 각도를 측정하는 방법에 대해 알아보겠습니다.
Fabric.js 설치 및 초기 설정
먼저, Fabric.js를 설치하고 초기 설정을 해야 합니다. 프로젝트 폴더에서 다음 명령을 사용하여 Fabric.js를 설치합니다.
npm install fabric
다음으로, HTML 파일에서 Fabric.js를 로드하기 위해 스크립트 태그를 사용합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
각도 측정하기
아래는 Fabric.js를 사용하여 각도를 측정하는 예제 코드입니다.
// Fabric.js 캔버스 생성
const canvas = new fabric.Canvas('canvas');
// 첫 번째 선 생성
const line1 = new fabric.Line([100, 100, 200, 200], {
stroke: 'red',
strokeWidth: 2
});
canvas.add(line1);
// 두 번째 선 생성
const line2 = new fabric.Line([200, 200, 300, 100], {
stroke: 'blue',
strokeWidth: 2
});
canvas.add(line2);
// 선 위에 캔버스 이벤트 리스너 추가
canvas.on('mouse:down', function(event) {
// 현재 마우스 위치로 새로운 선 생성
const line3 = new fabric.Line([event.e.offsetX, event.e.offsetY, event.e.offsetX, event.e.offsetY], {
stroke: 'green',
strokeWidth: 2
});
canvas.add(line3);
// 두 번째 선과의 각도 계산
const angle = fabric.util.degreesToRadians(line2.getAngle() - line3.getAngle());
// 결과 출력
console.log('Angle: ', angle);
});
위의 코드에서, canvas 변수는 Fabric.js의 캔버스 객체를 나타냅니다. fabric.Line을 사용하여 선을 생성하고 캔버스에 추가합니다. canvas.on('mouse:down') 이벤트 리스너를 사용하여 캔버스 위에서 마우스 클릭 이벤트를 감지합니다. 선을 생성하고 두 번째 선과의 각도를 계산하여 출력합니다.
결과 확인하기
Fabric.js를 활용하여 각도를 측정하는 예제를 실행하려면, HTML 파일에 다음과 같이 캔버스를 만들고 ID를 "canvas"로 설정해야 합니다.
<canvas id="canvas" width="800" height="600"></canvas>
위의 코드에서 width와 height 속성은 캔버스의 크기를 지정하는데, 필요에 따라 조절할 수 있습니다.
마우스를 사용하여 두 개의 선을 그린 다음, 새로운 선을 그려서 결과를 확인해 보세요. 각도 값은 브라우저의 개발자 도구 콘솔에 출력됩니다.
결론
Fabric.js를 사용하면 웹 애플리케이션에서 그래픽 요소를 쉽게 다룰 수 있습니다. 이 포스트에서는 Fabric.js를 사용하여 각도를 측정하는 방법을 알아보았습니다. Fabric.js를 사용하면 더 복잡한 그래픽 작업도 쉽게 처리할 수 있으니, 관심 있는 분들은 공식 문서를 참조해보시기 바랍니다.