[javascript] Fabric.js로 라인 그리기
이번 포스트에서는 JavaScript 라이브러리인 Fabric.js를 사용하여 웹 페이지 내에서 라인을 그리는 방법에 대해 알아보겠습니다.
1. Fabric.js 라이브러리 추가
먼저, Fabric.js를 사용하기 위해 해당 라이브러리를 웹 페이지에 추가해야 합니다. 다음의 코드를 <head> 태그 내에 추가합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>
2. Canvas 요소 생성
라인을 그릴 수 있는 캔버스 요소를 HTML에 추가합니다. 다음의 코드를 이용하여 <body> 태그 내에 캔버스 요소를 추가합니다.
<canvas id="canvas" width="800" height="600"></canvas>
3. 라인 그리기 함수 작성
라인을 그리는 함수를 작성합니다. 다음의 코드에서는 Fabric.js의 fabric.Line 클래스를 이용하여 라인 객체를 생성하고 캔버스에 추가하는 방법을 보여줍니다.
function drawLine(canvas, startX, startY, endX, endY) {
var line = new fabric.Line([startX, startY, endX, endY], {
fill: 'red',
stroke: 'red',
strokeWidth: 2
});
canvas.add(line);
}
4. 라인 그리기 예제
위에서 작성한 drawLine 함수를 사용하여 라인을 그려봅시다. 다음의 코드를 작성하여 캔버스에 라인을 그려보세요.
var canvas = new fabric.Canvas('canvas');
drawLine(canvas, 100, 100, 300, 300);
여기서 100, 100, 300, 300은 시작점(x, y)과 끝점(x, y)의 좌표값을 나타냅니다.
결론
이제 Fabric.js를 사용하여 웹 페이지 내에서 라인을 그리는 방법을 알아보았습니다. Fabric.js는 다양한 그래픽 요소를 쉽게 추가하고 제어할 수 있는 편리한 기능을 제공합니다. Fabric.js를 사용하여 더 다양한 그래픽 기능을 구현해보세요!