fontpixels.js

fontpixels.js

一个 JavaScript 库，用于根据此 stackoverflow 答案获取字体中字符的像素数据。查看此页面的演示。

应用程序编程接口

 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时才有效。对应于canvas ctx.lineWidth属性。

线

 lines = false ;

是否将文本绘制为线条，如 HTML5 canvas 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 ) ;
} ) ;