React の仕組みで HTML5 キャンバスを利用する react-canvas を試してみます。

インストール

npm で必要な物を入れていきます。

$ npm -S react react-canvas
$ npm -g browserify
$ npm -D babelify

使ってみる

画面に文章を描写してみます。

// a.jsx

import React from 'react';
import { Surface, Text } from 'react-canvas';

class App extends React.Component {
    render() {
        const { text = 'Hello, react-canvas!' } = this.state || {};
        return (
            <Surface width={300} height={300} left={0} top={0} enableCSSLayout={true}>
                <Text style={{ width: 300, height: 20, fontSize: 14, lineHeight: 20 }}>
                    {text}
                </Text>
            </Surface>
        );
    }
}

React.render(<App />, document.body);

Surface が canvas 要素になり、 Text が文章を描写します。

browserify でコンパイルします。

$ browserify -o bundle.js -t babelify a.jsx

これを読み込む HTML が以下です。

<!DOCTYPE html><meta charset="utf-8"><body><script src="bundle.js"></script></body>

開くとキャンバスに Hello, react-canvas ! と表示されるのがわかります。

イベント

クリックをハンドルしてみます。

    onClick() {
        this.setState({ text: 'Clicked!' })
    }

    render() {
        const { text = 'Hello, react-canvas!' } = this.state || {};
        return (
            <Surface width={300} height={300} left={0} top={0} enableCSSLayout={true}>
                <Text style={{ width: 300, height: 20, fontSize: 14, lineHeight: 20 }}
                    onClick={this.onClick.bind(this)}>
                    {text}
                </Text>
            </Surface>
        );
    }

Text の onClick プロパティにハンドラを指定します。

表示してクリックすると文章が Clicked! に変わります。キャンバス上のクリックされた要素を判定するのは自分で書くと面倒なので助かります。

まとめ

  • react-canvas を使えばキャンバス上の描写を React の仕組みを使って行える
  • イベントもハンドルできる