gpt4 book ai didi

Pixi.js Container.width 不返回宽度

转载 作者:行者123 更新时间:2023-12-05 02:14:45 25 4
gpt4 key购买 nike

我遇到了一些问题:我正在尝试访问我添加了 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" (用互联网图像替换兔子纹理,for 循环也被注释掉)。

有什么关于正确方法的建议吗?干杯

最佳答案

这里有几件事要解决。

首先,你的codepen中的问题是什么:

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

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

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

如果在您使用它创建新 Sprite 时纹理已经在缓存中,那么您无需等待即可访问其真实尺寸。

其次,为什么pixi网站上的bunny例子没有同样的问题:

事实上,它确实如此。您只是没有注意到它。

神奇之处在于 bunny.anchor.set(0.5);。它在网格中排列了 25 个宽度和高度为 1 的 Sprite 。通过将它们隔开,它们的容器现在的宽度和高度为 160。

此容器现在根据其当前尺寸立即居中,然后当 Sprite 纹理完成加载并且 Sprite 更新为新尺寸时。然而,由于它们的 anchor 设置为 0.5,这意味着尽管它们的容器现在变大了,但它们仍然居中。

您可以尝试使用比兔子更大的图像来夸大事物并更改 anchor 值,同时使用重新运行代码按钮而不是仅仅刷新页面。如果您重新运行代码,用于纹理的图像仍由 pixi 缓存,因此您会得到不同的结果。

最后,您将如何解决这个问题:

在使用它们创建 Sprite 之前加载您的 Assets 。
(或者至少在查询它们的尺寸以定位事物之前等待它们被加载)

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

关于Pixi.js Container.width 不返回宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53157551/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com