时间戳

首页 > 解决方案 > Pixi.js Container.width 不返回宽度

pixi.js - Pixi.js Container.width 不返回宽度

问题描述

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

我写了一个代码笔来显示这个问题，但它是这样的：

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。

我正在尝试像在演示中一样将容器居中。演示容器返回正确的宽度，除非您尝试只为一个“兔子”执行此操作（用互联网图像替换兔子纹理，for 循环也被注释掉）。

关于适当方法的任何建议？干杯

标签： pixi.js

解决方案

这里有几件事要解决。

首先，您的代码笔中的问题是：

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

在图像加载之前，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

推荐阅读