Leanote's Blog

I love Leanote!

react使用pixi画图

2019-11-14 07:46:24 17 0 0

admin

> 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
```

Pre: react ref(父组件访问子组件, 除了props)

Next: react常用npm插件

17

Tencent Weibo
QQ Zone
RenRen

Sign in to leave a comment.
No Leanote account? Sign up now.

0 comments

Navigation

Recent Posts

antd Form.Item如何依赖另一个Form.Item的值联动
Upload上传限制一张图片的时候会有抖动动画
vue2模仿外卖平台电梯效果
联动滑动电梯
react forwardRef导致泛型丢失

Friend Links

我的笔记
leanote home
leanote 社区
lea++
leanote github

Proudly powered by Leanote

Table of content