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 に適当な文字列を追加してやればいい。
とりあえず "あ｜" とか追加しておけば大丈夫じゃないでしょうか。
