PixiJSで日本語フォントが見切れる問題の対応

PixiJSのバージョンは4.8.4です。 指定のフォントで描画したいだけなのにすごく困った。

最初に結論

PIXI.TextMetrics.BASELINE_SYMBOLに適当な全角文字を追加してやればOK。

PIXI.TextMetrics.BASELINE_SYMBOL += "あ｜";

詳細

以下は Mplus 1m regularで描画したとき。

const width = 500;
const height = 200; 
const renderer = PIXI.autoDetectRenderer(width, height, {
  backgroundColor: 0x000000
});
document.querySelector("body").appendChild(renderer.view);
var container = new PIXI.Container();

var textStyle = new PIXI.TextStyle({
    fontFamily: ["M+ 1m"],
    fontSize: 24, 
    fontWeight: "normal",
    fill: 0xffffff,
});
var sprite = new PIXI.Text("Hogeあいうえお", textStyle);
sprite.anchor.set(0.5);
sprite.x = width / 2;
sprite.y = height / 2;

container.addChild(sprite);
renderer.render(container);

ただPIXI.Textを生成して描画しているだけですが、見切れます。

調べてみると、このあたりの話をしているissueがありました。

https://github.com/pixijs/pixi.js/issues/4228

どうもPIXI.TextMetrics.measureFontの中でフォントのサイズを測ってるみたいですが、ここで使ってるサンプルの文字よりも大きい文字があると、見切れちゃうみたいですね。

以下、pixi.jsから抜粋。

TextMetrics.measureFont = function measureFont(font) {
    ...
    var metricsString = TextMetrics.METRICS_STRING + TextMetrics.BASELINE_SYMBOL;
    var width = Math.ceil(context.measureText(metricsString).width);
    var baseline = Math.ceil(context.measureText(TextMetrics.BASELINE_SYMBOL).width);
    ...
    context.fillText(metricsString, 0, baseline);
    ...
}

ということで、PIXI.TextMetrics.BASELINE_SYMBOL に適当な文字列を追加してやればいい。 とりあえず "あ｜" とか追加しておけば大丈夫じゃないでしょうか。