canvasanimator

A canvas react UI component integrated with animation feature. It is an extension of canvas, integrated with an animator.

install

Usage

import React, { Component } from "react";
import ReactDOM from "react-dom";

import CanvasAnimator from "@jworkshop/canvasanimator";

import "./style.css";

class Example extends Component {
  constructor(props) {
    super(props);

    this.resizeHandler = this.resizeHandler.bind(this);
    this.animate = this.animate.bind(this);
    this.pauseHandler = this.pauseHandler.bind(this);
    this.resumeHandler = this.resumeHandler.bind(this);
  }

  someFunction() {
    const canvas = this.myCanvas;

    /** Retrieve the canvas react component. */
    canvas.getCanvasElement();

    /** Get the width of the canvas react component. */
    canvas.getCanvasWidth();

    /** Get the width of the canvas react component. */
    canvas.getCanvasHeight();

    /** Get the context of the canvas. */
    canvas.getContext();

    /** Get the image data of the canvas with a give area. */
    canvas.getImageData(startX, startY, endX, endY);

    /** Start the animation. */
    canvas.start();

    /** Pause the animation. */
    canvas.pause();

    /** Resume the animation. */
    canvas.resume();
  }

  resizeHandler(width, height) {
    // Do you stuff
  }

  animate(context, width, height, timeDiff) {
    // Do you stuff
  }

  pauseHandler() {
    // Do you stuff
  }

  resumeHandler() {
    // Do you stuff
  }

  render() {

    return (
      <CanvasAnimator
        ref={myCanvas => this.myCanvas = myCanvas}
        className="className"
        style={ ... }
        canvasClassName="canvasClassName"
        canvasStyle={ ... }
        onResize={this.resizeHandler}
        animate={this.animate}
        onPause={this.pauseHandler}
        onResume={this.resumeHandler}
      />
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));