Pixi.js Container.width不返回宽度

Question

我遇到了一个问题：我正在尝试访问已向其中添加了sprite的容器的宽度，但它似乎返回为1。但是，当我在其中检查对象时控制台，它给了我适当的宽度。

I wrote up a code pen showing the issue，但它是这样的：

var container = new PIXI.Container();
app.stage.addChild(container);

var sprite = PIXI.Sprite.fromImage('https://i2.wp.com/techshard.com/wp- 
content/uploads/2017/05/pay-1036469_1920.jpg?ssl=1&w=200');
container.addChild(sprite);

console.log(container.height);
console.log(container);

第一个控制台日志返回1，而如果我进入第二个日志中的对象，它将返回141。

我正在尝试使容器like in the demo居中。演示容器将返回适当的宽度，除非您try and do it for only one "bunny"（用Internet图像替换兔子纹理，也注释掉for循环）。

对此有何建议？ 干杯

Answer 1

这里有几件事要解决。

首先，您的Codepen中的问题是：

您正在从尚未加载的图像创建纹理。

在图像加载之前，pixi将无法提供图像的尺寸，并且当您立即查询它们时，容器报告的宽度和高度为1。如果将相同的console.log语句设置为超时，则它将在图像加载后报告尺寸，因此尺寸将是准确的。

注销对象本身似乎是可行的，因为当您检查对象的内容时，由于该点已加载图像，它们已更新为正确的值。

如果在您使用纹理创建新精灵时，纹理已经在缓存中，则无需等待即可访问其真实尺寸。

第二，为什么pixi网站上的兔子示例没有相同的问题：

实际上，是的。您只是没有注意到它。

魔力在bunny.anchor.set(0.5);中。它在一个网格中排列25个宽度和高度为1的精灵。通过将它们隔开，它们的容器现在的宽度和高度为160。

此容器现在根据其当前尺寸立即居中，然后在精灵纹理完成加载并使用其新尺寸更新精灵时。由于将锚点设置为0.5，这意味着尽管它们的容器现在更大，但它们仍然居中。

您可以使用比兔子更大的图像来夸大事物并更改锚点值，同时使用重新运行代码按钮，而不仅仅是刷新页面。如果重新运行代码，则用于纹理的图像将保留在pixi的缓存中，因此您将获得不同的结果。

最后，您如何解决此问题：

在使用精灵创建精灵之前先加载它们。
（或者至少要等到加载之前再查询其尺寸以定位事物）

您可以在这里找到pixi的资源加载器示例：http://pixijs.io/examples/?v=next-interaction#/basics/spritesheet.js