快速开始

在开始前请确保你的电脑上已经有较新的 NodeJS 环境

我们要做什么？

这里我们用例子直接上手做一个像官网示例这样的旋转图片，你可以先查看代码实现

初始化一个 React App

既然是让 PixiJS 跑在 React 中当然我们要先有一个 React 项目。

1. 首先用 npx 初始化一个 React 项目

npx create-react-app pixi-react

2. 删除掉新项目中 src/ 文件夹下的所有文件。

3. 在 src/ 中添加 index.js App.js

4. App.js 添加如下代码

import React, { Component } from 'react';

export default class PixiApp extends Component {
    render() {
        return (
            <h2>React App</h2>
        );
    }
}

5. index.js 添加如下代码

import React from 'react';
import ReactDOM from 'react-dom';
import PixiApp from './App';

ReactDOM.render(<PixiApp />, document.getElementById('root'));

现在我们 npm run start 或 yarn start 试试看？

后面都用 yarn 来编译/安装，你可以根据喜好选择 yarn 或 npm。

安装 PixiJS

我们已经有了一个 React 项目了

现在我们向项目中安装 PixiJS 的依赖

yarn add pixi.js

现在我们在 App.js 中完成一个简单的 Pixi App

在 `` 中导入刚刚安装的 PixiJS

import * as PIXI from 'pixi.js';

我们先创建一个 stage（舞台，你可以理解为一个画布）

export default class PixiApp extends Component {
    app = PIXI.Application;
    canvas = HTMLDivElement;

    componentDidMount() {
        // 创建一个 100 * 100 透明的 canvas 画布
        this.app = new PIXI.Application({ width: 100, height: 100 });

        this.canvas.appendChild(this.app.view);
    }

    render() {
        // 用 React 的 ref 将 Pixi 实现
        return (
            <div ref={(e) => { this.canvas = e }} />
        );
    }
}

这时我们的浏览器上就会出现一个 100 × 100 的 canvas 画布。

现在我们准备做一个像官网示例一样的旋转动画

1. 首先我们准备一张图片
   

2. 导入图片

注意：这里图片不能像 h5 那样直接引路径，要用 require 引进来

const png = PIXI.Sprite.from(require("./react.png"));

3. 把图片放进画布里

this.app.stage.addChild(png);

4. 现在这张图片已经出现在你的 stage 中，现在我们让它转起来

// 图片锚点挂载在中间
png.anchor.set(.5);

// 图片在画布的中间显示
png.x = this.app.screen.width / 2;
png.y = this.app.screen.height / 2;

// 让图片转起来
this.app.ticker.add(() => {
    png.rotation += -1;
});

恭喜你，完成了一个 React with PixiJS 的 App，你现在已经可以用 React 完成官网示例中的所有内容了，也可以继续查看更多写好的实例。