javascript - React Pixi 响应式阶段

Question

我正在尝试使我的舞台响应，但我不太确定在使用 react 库时如何做到这一点:

<Stage options={{backgroundColor: 0xffffff, radius: 1, width: 736, height: 414}}>

    <Sprite image="baseBike.png" x={100} y={100}/>

    <Sprite image={this.state.saddle.image} x={this.state.saddle.x} y={this.state.saddle.y}
            scale={{x: this.state.saddle.scale.x, y: this.state.saddle.scale.y}}/>


    <Sprite image={this.state.steering.image} x={this.state.steering.x}
            y={this.state.steering.y}
            scale={{x: this.state.steering.scale.x, y: this.state.steering.scale.y}}/>
    <Sprite image="circle.png" x={290} y={90} scale={{x: 1, y: 1}}
            interactive={true}
            pointerdown={() => {
                this.toogleMenu("saddle");
            }}
    />
    <Sprite image="circle.png" x={530} y={130} scale={{x: 1, y: 1}}
            interactive={true}
            pointerdown={() => {
                this.toogleMenu("steering");
            }}
    />

</Stage>

有人知道如何确保 Sprites 和 Stage 具有响应能力吗？

Answer 1

有很多方法可以实现这一点，但根据我的经验，当您的应用程序开始变大时，单独调整对象的大小将是一件非常痛苦的事情。

到目前为止，我发现的最简单且一致的方法是尽可能多地使用容器的概念。

例如你的舞台是一个容器。添加 Sprite 或任何其他对象时，它们将相对于它们添加到的舞台进行定位和缩放。

尝试仅将任何比例和位置直接应用于舞台。看看下面的文章: https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html

它提供了一些仅调整 Canvas 大小的选项，这也对其子级生效。希望对您有帮助