fontpixels.js

fontpixels.js

이 stackoverflow 답변을 기반으로 글꼴로 된 문자의 픽셀 데이터를 가져오기 위한 자바스크립트 라이브러리입니다. 데모를 보려면 이 페이지를 확인하세요.

API

 var pixelarray = fontpixels . generatepixels ( text , resolution , fontFamily , width , lines ) ;

텍스트

 // supports ascii...
text = "A" ;
// and unicode
text = "╫" ;

글자 사이의 간격이 다소 엉성하므로 텍스트에는 문자만 삽입하는 것이 좋습니다.

해결

 resolution = 30 ;

해상도는 출력 크기와 출력 세부 사항을 모두 결정합니다. 해상도가 높을수록 더 큰 픽셀 배열과 더 많은 세부 정보가 출력됩니다.

글꼴군

 fontFamily = "Times New Roman" ;

텍스트의 글꼴입니다. fontpixels.generatepixels() 호출하기 전에 글꼴이 로드되었는지 확인하세요. 나는 글꼴 로더로 WebFont를 추천하고 싶습니다.

너비

 width = 0.3 ;

텍스트의 선 너비입니다. 일반적으로 0과 1 사이의 값이면 충분합니다. lines true로 설정된 경우에만 작동합니다. 캔버스 ctx.lineWidth 속성에 해당합니다.

윤곽

 lines = false ;

HTML5 캔버스 ctx.strokeText() 와 같이 텍스트를 선으로 그릴지 여부입니다.

픽셀 배열

 console . log ( pixelarray ) ;
	//[{x: 2, y: 4}, {x: 5, y: 6} ...]

출력은 픽셀의 (x, y) 값 배열입니다. 픽셀을 반복하여 사용할 수 있습니다.

 pixelarray . forEach ( function ( value ) {
	console . log ( value . x , value . y ) ;
} ) ;