LoginSignup
1
0

More than 5 years have passed since last update.

[めも]pixi.jsのTextは、同じスタイルでも、色を変えると微妙にサイズが変わる?

Last updated at Posted at 2017-03-28

実験した環境:
OS: Windows7
Firefox: 52.0
pixi.js: v4.4.2

pixi.jsで、色(fill)だけを変えたTextを、同じ位置に重ねて描画してみると、
枠線が付いたように見える事がある。
コード例(test.js)を実行してみると、黒い文字の周りに、部分的に黄色い枠線が。
ということで、色を変えると、微妙に(1px位?)サイズが変わるのかも。
(実際は、色を変えなくても変化しているのかもしれませんが・・)

テキストの表示をクリアせずに同じ箇所に再描画する時などに、注意が必要かと思います。

test.js
var app = new PIXI.Application(800, 600, { backgroundColor: 0x202020, antialias: false }); // antialias:trueでも同様の結果
document.body.appendChild(app.view);

var tx1 = new PIXI.Text('Text', {fill: 0xFFFF77, fontSize: 96});
var tx2 = new PIXI.Text('Text', {fill: 0x000000, fontSize: 96});
app.stage.addChild(tx1);
app.stage.addChild(tx2);

実行例:
jsfiddle

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0