fontpixels.js

fontpixels.js

Eine Javascript-Bibliothek zum Abrufen der Pixeldaten eines Zeichens in einer Schriftart basierend auf dieser Stackoverflow-Antwort. Schauen Sie sich diese Seite für eine Demo an.

API

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

Text

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

Es wird empfohlen, nur ein Zeichen für den Text einzufügen, da der Abstand zwischen den Buchstaben etwas unkonventionell ist.

Auflösung

 resolution = 30 ;

Die Auflösung bestimmt sowohl die Größe der Ausgabe als auch die Details der Ausgabe. Höhere Auflösungen ergeben größere Pixelarrays und mehr Details.

Schriftartenfamilie

 fontFamily = "Times New Roman" ;

Schriftart des Textes. Stellen Sie sicher, dass die Schriftart geladen ist, bevor Sie fontpixels.generatepixels() aufrufen. Als Font-Loader würde ich WebFont empfehlen.

Breite

 width = 0.3 ;

Zeilenbreite des Textes. Normalerweise reichen Werte zwischen 0 und 1 aus. Funktioniert nur, wenn lines auf „true“ gesetzt ist. Entspricht der Canvas-Eigenschaft ctx.lineWidth .

Linien

 lines = false ;

Ob der Text als Linien gezeichnet werden soll, wie HTML5-Canvas ctx.strokeText() .

Pixelarray

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

Die Ausgabe ist ein Array von (x, y)-Werten der Pixel. Sie können die Pixel verwenden, indem Sie darüber iterieren.

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