pengdongliang 的个人博客

npm i pixi.js

使用:

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import * as Pixi from "pixi.js"

const styles = {
    box: {
        position: "relative",
        zIndex: "999999999999999999",
    }
}

class PixiComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            pixi: null,
            gameCanvas: null,
        }
    }

    refCallBack = ref => {
        if (!this.state.gameCanvas) {
            this.setState({
                gameCanvas: ref
            }, () => {
                const app = new Pixi.Application({
                    transparent: true,
                    // backgroundColor: 0xffffff,
                    resizeTo: window,
                });
                this.setState({
                    pixi: app
                }, () => {
                    let newGameCanvas = this.state.gameCanvas
                    newGameCanvas.appendChild(this.state.pixi.view);
                    this.setState({
                        gameCanvas: newGameCanvas
                    }, () => {
                        this.state.pixi.start();
                        console.log(this.state.gameCanvas);
                        console.log(this.state.pixi);
                    })
                })
            })
        }
    }

    componentWillUnmount() {
        this.state.pixi.stop();
    }

    render() {
        return (
            <div ref={this.refCallBack} />
        )
    }
}

PixiComponent.propTypes = {

}

export default PixiComponent