使用Pixi.js代码修改container height属性无效，控制台修改正常求助

我之前也碰到过一模一样的情况，这其实是因为你误解了Pixi.js里Container的height属性本质——它是个只读的计算属性，根本不是用来直接赋值修改的！

为什么会出现两个height属性？ #

当你在代码里执行container.height = xxx时，因为原型上的height只有getter没有setter，JS会在你的容器实例上新增一个可枚举的自定义height属性，这就是你看到的「正常显示、有缩进」的那个。而控制台里灰色显示的是原型链上Pixi原生的只读height getter，它才是真正反映容器实际高度的属性。

你通过代码修改的是自己新增的那个无效属性，自然不会影响容器的实际显示；而在控制台修改灰色的原生属性（本质是触发了内部的边界更新逻辑），才会让容器高度产生变化。

正确调整容器高度的方法 #

如果你想改变容器的视觉高度，有几种常用的靠谱方案：

1. 使用缩放属性scale.y
   这是最直接的方式，通过缩放来调整容器的显示高度：

// 把容器高度缩放到原来的50%
container.scale.y = 0.5;

// 如果需要固定到目标高度，可以先计算当前实际高度再调整缩放比例
const targetHeight = 300;
const bounds = container.getLocalBounds();
if (bounds.height > 0) {
  container.scale.y = targetHeight / bounds.height;
}

2. 调整子元素的尺寸或位置
   如果你的容器高度是由子元素撑起来的，直接修改子元素的height、y坐标或者缩放，就能间接改变容器的计算高度。

3. 清理误添加的自定义height属性
   如果你之前不小心给容器实例添加了自定义的height属性，先删除它，这样原生的只读height getter就能正常工作了：

delete container.height;

补充说明 #

Pixi.js里Container的width和height都是基于子元素边界计算出来的只读属性，它们的值会在容器或子元素发生变化时自动更新。如果你需要一个可以手动设置的容器尺寸，可以考虑用PIXI.Graphics绘制一个固定大小的矩形作为容器背景，或者自定义一个带可写尺寸属性的容器子类。

内容的提问来源于stack exchange，提问作者JDel