0.1.6 • Published 5 years ago
jw-animate-canvas v0.1.6
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"));