Fabric.js는 HTML5 캔버스 요소를 다루기 위한 자바스크립트 라이브러리입니다. 이 라이브러리를 사용하여 텍스트 요소의 정렬과 줄 간격을 설정하는 방법을 알아보겠습니다.
1. Fabric.js 설치
Fabric.js를 사용하기 위해 먼저 해당 라이브러리를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.
npm install fabric
2. 캔버스 생성 및 텍스트 추가
먼저 HTML 파일에 캔버스 요소를 추가하고, JavaScript 코드에서 해당 캔버스 요소를 선택합니다. 그리고 Fabric.js를 사용하여 캔버스 객체를 생성합니다. 이후 텍스트 객체를 생성하고 캔버스에 추가합니다.
<canvas id="canvas"></canvas>
<script>
var canvas = new fabric.Canvas('canvas');
var text = new fabric.Text('Hello, Fabric.js!');
canvas.add(text);
</script>
위 코드를 실행하면 캔버스에 “Hello, Fabric.js!”라는 텍스트가 나타납니다.
3. 텍스트 정렬 설정
텍스트의 정렬을 설정하는 방법은 text 객체의 textAlign 속성을 사용합니다. 다음은 텍스트를 가운데로 정렬하는 예제입니다.
<script>
var canvas = new fabric.Canvas('canvas');
var text = new fabric.Text('Hello, Fabric.js!', {
textAlign: 'center'
});
canvas.add(text);
</script>
위 코드를 실행하면 텍스트가 가운데로 정렬됩니다. textAlign 속성의 값으로는 ‘left’, ‘center’, ‘right’를 사용할 수 있습니다.
4. 줄 간격 설정
텍스트의 줄 간격은 text 객체의 lineHeight 속성을 사용하여 설정할 수 있습니다. 값은 퍼센트 단위로 지정되며, 기본 값은 1입니다. 다음은 줄 간격을 1.5로 설정하는 예제입니다.
<script>
var canvas = new fabric.Canvas('canvas');
var text = new fabric.Text('Hello, Fabric.js!', {
lineHeight: 1.5
});
canvas.add(text);
</script>
위 코드를 실행하면 텍스트의 줄 간격이 1.5배로 설정됩니다.
결론
Fabric.js를 사용하여 텍스트 요소의 정렬과 줄 간격을 설정하는 방법을 알아보았습니다. textAlign 속성을 사용하여 텍스트의 정렬을 설정하고, lineHeight 속성을 사용하여 줄 간격을 조절할 수 있습니다. Fabric.js의 다양한 기능을 활용하여 원하는 디자인과 레이아웃을 구현해보세요.