PixiJS中，那些元素可以设置宽高？

在 PixiJS 中，以下几种常见元素可以设置宽高：

1. PIXI.Sprite（精灵）

PIXI.Sprite 是 PixiJS 中用于显示纹理的基本元素，可通过 width 和 height 属性来设置其显示的宽高。

// 创建一个纹理
const texture = PIXI.Texture.from('path/to/your/image.png');
// 创建一个精灵
const sprite = new PIXI.Sprite(texture);

// 设置精灵的宽度和高度
sprite.width = 200;
sprite.height = 100;

// 将精灵添加到舞台
app.stage.addChild(sprite);

2. PIXI.Graphics（图形）

PIXI.Graphics 用于绘制各种图形，如矩形、圆形等。可以通过不同的方法绘制图形后，再调整其整体的宽高。

// 创建一个 Graphics 对象
const graphics = new PIXI.Graphics();

// 绘制一个矩形
graphics.beginFill(0xFF0000);
graphics.drawRect(0, 0, 100, 100);
graphics.endFill();

// 可以通过 scale 属性间接调整宽高
graphics.scale.x = 2;
graphics.scale.y = 2;

// 将图形添加到舞台
app.stage.addChild(graphics);

3. PIXI.Text（文本）

PIXI.Text 用于在屏幕上显示文本，可通过 width 和 height 属性设置其显示的宽高。

// 创建一个文本对象
const text = new PIXI.Text('Hello, PixiJS!', {
    fontFamily: 'Arial',
    fontSize: 24,
    fill: 0xFFFFFF
});

// 设置文本的宽度和高度
text.width = 200;
text.height = 50;

// 将文本添加到舞台
app.stage.addChild(text);

4. PIXI.Container（容器）:没有实际视觉表现

PIXI.Container 是一个可以包含其他显示对象的容器，虽然它本身没有实际的视觉表现，但可以通过设置其 width 和 height 属性来限制其内部子元素的布局范围，也可以通过 scale 属性间接调整其大小。

// 创建一个容器
const container = new PIXI.Container();

// 创建一个精灵并添加到容器中
const sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
sprite.width = 50;
sprite.height = 50;
container.addChild(sprite);

// 设置容器的宽度和高度
container.width = 100;
container.height = 100;

// 将容器添加到舞台
app.stage.addChild(container);

因为PIXI.Container设置后没有实际视觉表现，可以理解为宽高对它不生效，故采用的方法为在里面放置一个矩形Graphics,设置矩形的宽高撑起Container。

直接设置宽高不生效的原因

PIXI.Container 是一个用于组织和管理其他显示对象的容器，它没有自身的视觉表现，其 width 和 height 属性是根据它包含的子元素的边界框动态计算得出的，属于只读属性。所以直接给 width 和 height 赋值不会改变容器的实际大小。

需要注意的是，当设置元素的宽高时，可能会影响元素的比例和布局，需要根据实际需求进行调整。同时，有些元素可能会受到纹理、字体等因素的影响，在设置宽高时需要考虑这些因素。