jw-animate-canvas
v0.1.6
Published
A react component for canvas integrated with animation feature.
Downloads
18
Readme
jw-animate-canvas
A react component for canvas integrated with animation feature. It is a combination of canvas and animator.
Install
Props
| Prop | Description |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| maintainPixelSize
(optional) | whether the canvas should keep dimension from the moment it was created. Default: true
|
| onResize
(optional) | event handler when the canvas is being resized. |
| contextType
(optional) | canvas context type. Default: "2d"
|
| animator
(optional) | the animator object for controlling the animation. If not provided, it will be created from within. |
| animate
(optional) | animation method. Parameters: - context
: canvas context - width
: context width - height
: context height - timeDiff
: time difference between the last animate time (in seconds). |
Usage
import React, { Component } from "react";
import ReactDOM from "react-dom";
import AnimateCanvas from "jw-animate-canvas";
class Example extends Component {
constructor(props) {
super(props);
this.resizeHandler = this.resizeHandler.bind(this);
this.animate = this.animate.bind(this);
}
componentDidMount() {
const canvas = this.myCanvas;
const { animator } = canvas;
/** Start the animation. */
animator.start();
/** Pause the animation. */
animator.pause();
/** Resume the animation. */
animator.resume();
}
resizeHandler(width, height) {
/** ... **/
}
animate(context, width, height, timeDiff) {
/** ... **/
}
render() {
return (
<AnimateCanvas
ref={myCanvas => (this.myCanvas = myCanvas)}
onResize={this.resizeHandler}
animate={this.animate}
/>
);
}
}
ReactDOM.render(<Example />, document.getElementById("root"));