Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/waichungwong/jw-animate-canvas
A react component for canvas, integrated with animation feature.
https://github.com/waichungwong/jw-animate-canvas
canvas npm-module react requestanimationframe
Last synced: about 1 month ago
JSON representation
A react component for canvas, integrated with animation feature.
- Host: GitHub
- URL: https://github.com/waichungwong/jw-animate-canvas
- Owner: WaiChungWong
- License: mit
- Created: 2018-05-03T10:23:38.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-08T02:41:06.000Z (about 2 years ago)
- Last Synced: 2024-10-11T22:24:16.632Z (3 months ago)
- Topics: canvas, npm-module, react, requestanimationframe
- Language: JavaScript
- Size: 2.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jw-animate-canvas
A react component for canvas integrated with animation feature.
It is a combination of [canvas](https://nodei.co/npm/jw-canvas) and [animator](https://nodei.co/npm/jw-animator).[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url][npm-image]: http://img.shields.io/npm/v/jw-animate-canvas.svg
[npm-url]: http://npmjs.org/package/jw-animate-canvas
[travis-image]: https://img.shields.io/travis/WaiChungWong/jw-animate-canvas.svg
[travis-url]: https://travis-ci.org/WaiChungWong/jw-animate-canvas
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/jw-animate-canvas.svg
[download-url]: https://npmjs.org/package/jw-animate-canvas[Demo](http://waichungwong.github.io/jw-animate-canvas/build)
## Install
[![NPM](https://nodei.co/npm/jw-animate-canvas.png)](https://nodei.co/npm/jw-animate-canvas)
## 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
```javascript
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 (
(this.myCanvas = myCanvas)}
onResize={this.resizeHandler}
animate={this.animate}
/>
);
}
}ReactDOM.render(, document.getElementById("root"));
```