fontpixels.js

fontpixels.js

Библиотека JavaScript для получения пиксельных данных символа в шрифте на основе этого ответа stackoverflow. Посетите эту страницу для демо-версии.

API

 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. Соответствует свойству холста 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 ) ;
} ) ;