fontpixels.js

fontpixels.js

Une bibliothèque javascript pour obtenir les données de pixels d'un personnage dans une police basée sur cette réponse stackoverflow. Consultez cette page pour une démo.

API

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

texte

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

Il est recommandé d'insérer uniquement un caractère pour le texte car l'espacement entre les lettres est un peu génial.

résolution

 resolution = 30 ;

La résolution détermine à la fois la taille de la sortie et le détail de la sortie. Des résolutions plus grandes génèrent des tableaux de pixels plus grands et plus de détails.

famille de polices

 fontFamily = "Times New Roman" ;

Police du texte. Assurez-vous que la police est chargée avant d'appeler fontpixels.generatepixels() . Je recommanderais WebFont pour un chargeur de polices.

largeur

 width = 0.3 ;

Largeur de ligne du texte. Les valeurs comprises entre 0 et 1 sont généralement suffisantes. Ne fonctionne que lorsque lines sont définies sur true. Correspond à la propriété canvas ctx.lineWidth .

lignes

 lines = false ;

S'il faut dessiner le texte sous forme de lignes, comme le canevas HTML5 ctx.strokeText() .

tableau de pixels

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

La sortie est un tableau de valeurs (x, y) des pixels. Vous pouvez utiliser les pixels en les itérant.

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