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;
canvas.getCanvasElement();
canvas.getCanvasWidth();
canvas.getCanvasHeight();
canvas.getContext();
canvas.getImageData(startX, startY, endX, endY);
canvas.start();
canvas.pause();
canvas.resume();
}
resizeHandler(width, height) {
}
animate(context, width, height, timeDiff) {
}
pauseHandler() {
}
resumeHandler() {
}
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"));