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

它提供了一些仅用于调整 canvas 大小的选项，这些选项也将对其子项生效。希望对你有帮助

React Pixi 响应阶段

React Pixi responsive stage

javascript

reactjs

pixi.js