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