fontpixels.js

fontpixels.js

Uma biblioteca javascript para obter os dados de pixel de um personagem em uma fonte com base nesta resposta stackoverflow. Confira esta página para uma demonstração.

API

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

texto

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

Recomenda-se inserir apenas um caractere para o texto porque o espaçamento entre as letras é um pouco estranho.

resolução

 resolution = 30 ;

A resolução determina o tamanho e os detalhes da saída. Resoluções maiores geram matrizes de pixels maiores e mais detalhes.

fonteFamília

 fontFamily = "Times New Roman" ;

Fonte do texto. Certifique-se de que a fonte esteja carregada antes de chamar fontpixels.generatepixels() . Eu recomendaria o WebFont para um carregador de fontes.

largura

 width = 0.3 ;

Largura da linha do texto. Valores entre 0 e 1 geralmente são suficientes. Funciona apenas quando lines estão definidas como verdadeiras. Corresponde à propriedade canvas ctx.lineWidth .

linhas

 lines = false ;

Seja para desenhar o texto como linhas, como a tela HTML5 ctx.strokeText() .

matriz de pixels

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

A saída é uma matriz de valores (x, y) dos pixels. Você pode usar os pixels iterando sobre eles.

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