https://github.com/yoctol/react-paperjs-experiment
https://github.com/yoctol/react-paperjs-experiment
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/yoctol/react-paperjs-experiment
- Owner: Yoctol
- Created: 2017-07-10T11:11:20.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-01-18T07:56:24.000Z (over 8 years ago)
- Last Synced: 2025-02-27T00:16:11.451Z (over 1 year ago)
- Language: JavaScript
- Size: 35.2 KB
- Stars: 1
- Watchers: 9
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-paperjs-experiment
[](https://www.npmjs.com/package/react-paperjs-experiment)
Caution: This library only supports first time rendering at this moment, so any re-rendering behavior with react will not work.
## Installation
```sh
npm i --save react-paperjs-experiment
```
or
```sh
yarn add react-paperjs-experiment
```
## Usage
```jsx
const React = require('react');
const paper = require('paper-jsdom-canvas');
const { Group, PointText, Shape, Path, Raster, Svg } = require('react-paperjs-experiment');
const { renderToPNG } = require('react-paperjs-experiment/node');
const svg =
'';
const App = () =>
;
const canvas = paper.createCanvas(300, 300);
renderToPNG(, canvas, __dirname + '/paper.png');
```
See the basic example at [examples](./examples) folder.
## API
### renderToPNG(element, canvas, path, callback)
```jsx
const React = require('react');
const paper = require('paper-jsdom-canvas');
const { Group, Path } = require('react-paperjs-experiment');
const { renderToPNG } = require('react-paperjs-experiment/node');
const canvas = paper.createCanvas(300, 300);
renderToPNG(
,
canvas,
__dirname + '/paper.png',
() => { console.log('done'); }
)
```
### renderToBuffer(element, canvas, callback)
```jsx
const React = require('react');
const paper = require('paper-jsdom-canvas');
const { Group, Path } = require('react-paperjs-experiment');
const { renderToBuffer } = require('react-paperjs-experiment/node');
const canvas = paper.createCanvas(300, 300);
renderToPNG(
,
canvas,
buffer => { console.log(buffer); }
)
```
### Components
- Item
- Layer
- Group
- Raster
- Shape.Circle
- Shape.Rectangle
- Shape.Ellipse
- Path.Line
- Path.Circle
- Path.Rectangle
- Path.Ellipse
- Path.Arc
- Path.RegularPolygon
- Path.Star
- PointText
- Svg
[Paper.js official document](http://paperjs.org/reference/global/)