Paper.js는 HTML5 캔버스를 기반으로 한 도형 그리기 및 애니메이션 라이브러리입니다. 그러나 Paper.js는 그래픽 처리 뿐 아니라 텍스트 및 폰트도 처리할 수 있는 강력한 기능을 제공합니다. 이 글에서는 Paper.js를 사용하여 텍스트 및 폰트를 다루는 방법에 대해 알아보겠습니다.
1. 텍스트 생성하기
Paper.js에서 텍스트를 생성하기 위해서는 Point 객체와 PointText 객체를 사용합니다. 다음 예제 코드를 통해 텍스트를 생성하는 방법을 살펴보겠습니다.
// Paper.js 설정
paper.install(window);
paper.setup("myCanvas");
// 텍스트 생성
var point = new Point(100, 100);
var text = new PointText(point);
text.content = "Hello, World!";
text.fontSize = 24;
text.fillColor = "black";
// 캔버스에 텍스트 추가
project.activeLayer.addChild(text);
위의 코드에서는 텍스트를 “Hello, World!”라는 내용으로 생성하고, 폰트 크기를 24로 설정하고, 글자 색상을 검정으로 지정합니다. 마지막으로 addChild() 메서드를 사용하여 캔버스에 텍스트를 추가합니다.
2. 폰트 사용하기
Paper.js는 기본적으로 웹 브라우저에서 사용 가능한 모든 폰트를 지원합니다. 특정 폰트를 사용하기 위해서는 font-family 속성을 사용하여 폰트를 지정해야 합니다. 다음 예제 코드에서는 font-family 속성을 사용하여 특정 폰트를 적용하는 방법을 보여줍니다.
// Paper.js 설정
paper.install(window);
paper.setup("myCanvas");
// 텍스트 생성
var point = new Point(100, 100);
var text = new PointText(point);
text.content = "Hello, World!";
text.fontSize = 24;
text.fillColor = "black";
text.fontFamily = "Arial";
// 캔버스에 텍스트 추가
project.activeLayer.addChild(text);
위의 코드에서는 폰트를 “Arial”로 설정하여 텍스트에 적용합니다. 이렇게 함으로써 해당 폰트가 웹 브라우저에 설치되어 있다면 텍스트에 지정한 폰트가 적용됩니다.
3. 폰트 로드하기
Paper.js에서는 폰트를 직접 로드하여 사용할 수도 있습니다. 이를 위해서는 FontFace 클래스를 사용해야 합니다. 다음 예제 코드에서는 외부 폰트 파일을 로드하여 폰트를 적용하는 방법을 보여줍니다.
// Paper.js 설정
paper.install(window);
paper.setup("myCanvas");
// 폰트 로드
var font = new FontFace("MyFont", "url(fonts/MyFont.ttf)");
// 폰트 로딩 완료 후 캔버스에 텍스트 추가
font.load().then(function() {
var point = new Point(100, 100);
var text = new PointText(point);
text.content = "Hello, World!";
text.fontSize = 24;
text.fillColor = "black";
text.fontFamily = "MyFont";
project.activeLayer.addChild(text);
});
위의 코드에서는 FontFace 객체를 사용하여 폰트 파일을 로드합니다. url() 함수를 사용하여 폰트 파일 경로를 지정하고, FontFace 객체의 load() 메서드를 호출하여 폰트를 비동기로 로딩합니다. 로딩이 완료될 때까지 기다렸다가 텍스트를 생성하고 캔버스에 추가합니다.
결론
Paper.js는 텍스트 및 폰트 처리에 유용한 기능을 제공합니다. 텍스트 생성, 폰트 사용, 폰트 로드 등 다양한 방법을 통해 원하는 텍스트 효과를 구현할 수 있습니다. Paper.js의 문서를 참조하면 더 많은 기능과 옵션을 확인할 수 있으니 참고해보세요.