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

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

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

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

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

它提供了一些仅用于调整画布大小的选项，这些选项也会影响画布的子对象。希望能有所帮助