react component using zrender
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
example
src
tool
.babelrc
.fecsignore
.fecsrc
.gitignore
.npmignore
README.md
bower.json
gulpfile.js
package.json
webpack.config.js

README.md

react-zrender

React Zrender adds the ability for React components to render to <canvas> or <svg> using zrender core

React Zrender Components

React Canvas provides a set of standard React components that abstract the underlying rendering implementation.

<Zrender>

Zrender is the top-level component. All the other components should be in it.

<Group>

Group is a container component. Because React enforces that all components return a single component in render(), Groups can be useful for parenting a set of child components. The Group is also an important component for optimizing scrolling performance, as it allows the rendering engine to cache expensive drawing operations. It uses the Group in zrender.

<Text>

Text is a flexible component that supports multi-line truncation.

<Image>

Image is exactly what you think it is.

API

getShape(string ShapeComponentName)

Returns the Shape Component. The zrender shape element should be required mannually.

require('zrender/graphic/shape/Circle');
const Circle = getShape('Circle');

zrender shapes

  • Arc
  • BezierCurve
  • Circle
  • Droplet
  • Ellipse
  • Heart
  • Isogon
  • Line
  • Polygon
  • Polyline
  • Rect
  • Ring
  • Rose
  • Sector
  • Star
  • Trochoid

Building Components

Here is a very simple component that renders texts and circles:

const React = require('react');
const ReactDOM = require('react-dom');

const {
    Zrender,
    Text,
    Group,
    getShape
} = require('react-zrender');

// support svg
require('zrender/svg/svg');

require('zrender/graphic/shape/Circle');
const Circle = getShape('Circle');

const App = React.createClass({

    render() {

        return (
            <Zrender
                renderer="canvas"
                width={500}
                height={300}>
                <Text
                    style={{
                        fill: '#000',
                        font: '18px Arial',
                        textFont: '18px Arial',
                        x: 100,
                        y: 100
                    }}>
                    hello
                </Text>
                <Group>
                    <Circle
                        ref="circle"
                        shape={{
                            cx: 250,
                            cy: 150,
                            r: 20
                        }}
                        style={{
                            stroke: '#000',
                            fill: 'transparent'
                        }} />
                        <Group>
                            <Circle
                                shape={{
                                    cx: 300,
                                    cy: 150,
                                    r: 30
                                }}
                                style={{
                                    stroke: '#000',
                                    fill: 'transparent'
                                }} />
                        </Group>
                </Group>
            </Zrender>
        );
    }
});

Animation

simple example.

const React = require('react');
const ReactDOM = require('react-dom');

const {
    Zrender,
    getShape
} = require('react-zrender');

require('zrender/graphic/shape/Circle');
const Circle = getShape('Circle');

const App = React.createClass({

    getInitialState() {
        return {
            scale: [1, 1]
        };
    },

    componentDidMount() {
        const {circle} = this.refs;
        const me = this;
        circle
            .animate('', false)
            .when(1000, {
                scale: [5, 5]
            })
            .done(() => {
                me.setState({scale: [5, 5]});
            })
            .start('cubicOut');
    },

    render() {

        return (
            <Zrender
                renderer="canvas"
                width={500}
                height={300}>
                <Circle
                    ref="circle"
                    shape={{
                        cx: 0,
                        cy: 0,
                        r: 20
                    }}
                    scale={this.state.scale}
                    position={[250, 150]}
                    style={{
                        stroke: '#000',
                        fill: 'transparent'
                    }} />
            </Zrender>
        );
    }
});