node-canvas: Использование пользовательского шрифта

Question

Я хотел бы знать, как использовать пользовательский шрифт с узловым холстом.

Вот моя попытка, но она не работает до сих пор:

var Canvas = require('canvas') 
    , Image = Canvas.Image 
    , Font = Canvas.Font 
    , path = require('path'); 

var gubblebum = new Font('gubblebum', fontFile('GUBBLO___.ttf')); 

function fontFile(name) { 
    return path.join(__dirname, '../fonts', name); 
} 

function draw() { 
    var canvas = new Canvas(100, 100) 
    , ctx = canvas.getContext('2d'); 

    ctx.addFont(gubblebum); 
    ctx.font = 'bold 40 gubblebum'; 
    ctx.fillText('test', 25, 45); 

    return canvas; 
} 

module.exports = draw; 

Когда отображаются в браузере, шрифт остается неизменным от значения по умолчанию, а также размер.

Файл шрифта загружен правильно. В противном случае будет выбрано исключение.

Интересно, когда я делаю ctx.font = 'bold 40 someGibberish'; размер шрифта применяется правильно.

Answer 1

Таким образом, я закончил работу с холстом для работы с пользовательскими шрифтами.

Сначала я использовал более старую версию Каира. Я использовал Brew для установки всех зависимостей, поскольку он рассказал мне, какие из них у меня были, и какие из них были связаны правильно, а затем, как только все зависимости работали корректно, я удалил версию Cairo из Brew и установил версию 1.12.X (patch версия 18, я думаю, была) Каира. Это решило проблему Mac OSX с размером шрифта, но я не смог загрузить шрифты.

Итак, после некоторого расследования я обнаружил, что возникла проблема с последним модулем Node Canvas, поэтому я сильно устанавлю версию 1.1.0 в своем пакете. Json и FINALLY У меня есть пользовательские шрифты для правильной загрузки и размера.

So TL; DR: Используйте версию Cairo 1.12.X и Canvas 1.1.0, и она должна работать, я думаю? Мне потребовалось некоторое время, чтобы заставить его работать.

Answer 2

Теперь это должно быть «Just Work» в холсте 2.0 (в настоящее время в альфа, но относительно стабильном). См. Новый метод Canvas.registerFont: https://github.com/Automattic/node-canvas/#registerfont-for-bundled-fonts.