fontpixels.js

fontpixels.js

Pustaka javascript untuk mendapatkan data piksel karakter dalam font berdasarkan jawaban stackoverflow ini. Lihat halaman ini untuk demo.

API

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

teks

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

Disarankan untuk hanya menyisipkan karakter pada teks karena jarak antar huruf agak funky.

resolusi

 resolution = 30 ;

Resolusi menentukan ukuran keluaran dan detail keluaran. Resolusi yang lebih besar menghasilkan susunan piksel yang lebih besar dan lebih detail.

fontFamily

 fontFamily = "Times New Roman" ;

Font teks. Pastikan font dimuat sebelum Anda memanggil fontpixels.generatepixels() . Saya akan merekomendasikan WebFont untuk pemuat font.

lebar

 width = 0.3 ;

Lebar garis teks. Nilai antara 0 dan 1 biasanya cukup. Hanya berfungsi jika lines disetel ke true. Sesuai dengan properti kanvas ctx.lineWidth .

garis

 lines = false ;

Apakah akan menggambar teks sebagai garis, seperti kanvas HTML5 ctx.strokeText() .

pixelarray

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

Outputnya adalah array nilai (x, y) piksel. Anda dapat menggunakan piksel dengan mengulanginya.

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