4

我想知道如何在 node-canvas 中使用自定义字体。

这是我的尝试，但到目前为止它不起作用：

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'; 字体大小应用正确。

4

2 回答 2

5

这现在应该在 node-canvas 2.0+ 中“正常工作”。查看新Canvas.registerFont方法：https ://github.com/Automattic/node-canvas/#registerfont 。

于 2017-09-05T23:27:54.907 回答
2

所以我最终让节点画布使用自定义字体。

首先，我使用的是旧版本的 Cairo。我使用 Brew 安装所有依赖项，因为它告诉我我拥有哪些以及哪些链接正确，然后一旦所有依赖项都正常工作，我从 Brew 卸载了 Cairo 版本并安装了 1.12.X 版本（补丁我认为是第 18 版）开罗。这解决了字体大小的 Mac OSX 问题，但我无法加载字体。

因此，经过一番调查，我发现最新的 Node Canvas 模块也存在问题，所以我在 package.json 中将版本硬设置为 1.1.0，最后我得到了自定义字体以正确加载和调整大小。

所以 TL;DR：使用 Cairo 版本 1.12.X 和 Node Canvas 1.1.0，我认为它应该可以工作吗？我花了一段时间才让它工作。

于 2015-10-26T01:14:48.517 回答