如何用背景图像创建PIXI.text

Question

我使用的是PIXI，我想添加一些带有背景图像的文本对象。

var text = new PIXI.Text('my custom text', 
    { 
     font : '12px Arial', 
     fill : 0x666666, 
     align : 'center', 
     cacheAsBitmap: true, // for better performance 
     height: 57, 
     width: 82 
    }); 

stage.addChild(text); 

是PIXI.texture背景图像（如气球）添加到该文本的唯一途径？

如果是这样，使用下面的代码：

var texture = PIXI.Texture.fromImage("balloon"); 
text.setTexture(texture); 

我得到这个错误：

Uncaught TypeError: Cannot set property 'x' of null 

我做错了吗？

Answer 1

您不能在文本对象上设置背景图像。但是，您可以轻松地将文本对象添加为Sprite的子项。

注意：Texture存储表示图像的信息，但不能直接添加到显示列表中。您应该改用PIXI.Sprite。

//Create the background Image 
var sprite = PIXI.Sprite.fromImage('balloon'); 
sprite.position.x = 100; 
sprite.position.y = 100; 
stage.addChild(sprite); 

//Add text as a child of the Sprite 
var text = new PIXI.Text('my custom text', 
    { 
     font : '12px Arial', 
     fill : 0x666666, 
     align : 'center', 
     cacheAsBitmap: true, // for better performance 
     height: 57, 
     width: 82 
    });  
sprite.addChild(text); 

您可以中心对齐一切都像这样：

sprite.anchor.x = sprite.anchor.y = 0.5; 
text.anchor.x = text.anchor.y = 0.5;