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 以降では「Just Work」になるはずです。新しい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 に答える