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 ) ;
} ) ;