Pixi.js Container.width 不 return 宽度
Pixi.js Container.width does not return width
我遇到了一些问题：我正在尝试访问我添加了精灵的容器的宽度，但它似乎 return 为 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);
第一个控制台日志 returns 1，而如果我进入第二个日志中的对象，它会给我 141。
我正在尝试使容器居中 like in the demo. The demo container returns the proper width, unless you try and do it for only one "bunny"（用互联网图像替换兔子纹理，for 循环也被注释掉）。
关于正确的方法有什么建议吗？
干杯
这里有几件事要解决。
首先，你的codepen中的问题是什么：
您正在从尚未加载的图像创建纹理。
在图像加载之前，pixi 将无法为您提供它的尺寸，当您立即查询它们时，容器会报告宽度和高度为 1。如果您在超时中放置相同的 console.log 语句，那么它将在图像加载后报告尺寸，因此尺寸将是准确的。
注销对象本身似乎可行，因为当您检查它的内容时，它们已更新为正确的值，因为此时图像已加载。
如果在您使用它创建新精灵时纹理已经在缓存中，那么您无需等待即可访问其真实尺寸。
其次，为什么pixi网站上的bunny例子没有同样的问题：
事实上，确实如此。你只是没有注意到而已。
魔法就在bunny.anchor.set(0.5);。它在网格中排列了 25 个宽度和高度为 1 的精灵。通过将它们隔开，它们的容器现在的宽度和高度为 160。
此容器现在根据其当前尺寸立即居中，然后当精灵纹理完成加载并且精灵更新为新尺寸时。然而，由于它们的锚点设置为 0.5，这意味着尽管它们的容器现在变大了，但它们仍然居中。
您可以尝试使用比兔子更大的图像来夸大事物并更改锚点值，同时使用重新运行代码按钮而不是仅仅刷新页面。如果您重新运行代码，用于纹理的图像仍由 pixi 缓存，因此您会得到不同的结果。
最后，您将如何解决此问题：
在用它们创建 sprite 之前加载您的资产。
（或者至少在查询它们的尺寸以定位事物之前等待它们被加载）
你可以在这里找到 pixi 资源加载器的例子：http://pixijs.io/examples/?v=next-interaction#/basics/spritesheet.js
我遇到了一些问题：我正在尝试访问我添加了精灵的容器的宽度，但它似乎 return 为 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);
第一个控制台日志 returns 1，而如果我进入第二个日志中的对象，它会给我 141。
我正在尝试使容器居中 like in the demo. The demo container returns the proper width, unless you try and do it for only one "bunny"（用互联网图像替换兔子纹理，for 循环也被注释掉）。
关于正确的方法有什么建议吗？ 干杯
这里有几件事要解决。
首先，你的codepen中的问题是什么：
您正在从尚未加载的图像创建纹理。
在图像加载之前，pixi 将无法为您提供它的尺寸，当您立即查询它们时，容器会报告宽度和高度为 1。如果您在超时中放置相同的 console.log 语句，那么它将在图像加载后报告尺寸，因此尺寸将是准确的。
注销对象本身似乎可行，因为当您检查它的内容时，它们已更新为正确的值，因为此时图像已加载。
如果在您使用它创建新精灵时纹理已经在缓存中，那么您无需等待即可访问其真实尺寸。
其次，为什么pixi网站上的bunny例子没有同样的问题：
事实上，确实如此。你只是没有注意到而已。
魔法就在bunny.anchor.set(0.5);。它在网格中排列了 25 个宽度和高度为 1 的精灵。通过将它们隔开，它们的容器现在的宽度和高度为 160。
此容器现在根据其当前尺寸立即居中，然后当精灵纹理完成加载并且精灵更新为新尺寸时。然而，由于它们的锚点设置为 0.5，这意味着尽管它们的容器现在变大了，但它们仍然居中。
您可以尝试使用比兔子更大的图像来夸大事物并更改锚点值，同时使用重新运行代码按钮而不是仅仅刷新页面。如果您重新运行代码，用于纹理的图像仍由 pixi 缓存，因此您会得到不同的结果。
最后，您将如何解决此问题：
在用它们创建 sprite 之前加载您的资产。
（或者至少在查询它们的尺寸以定位事物之前等待它们被加载）
你可以在这里找到 pixi 资源加载器的例子：http://pixijs.io/examples/?v=next-interaction#/basics/spritesheet.js