react-paper / React Paper Bindings
Paper.js bindings for React
Stars: ✭ 162
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Paper Bindings
Mir2
Javascript+Easycanvas+Node实现热血传奇(Mir2)游戏,还原了人物&装备&刷怪&战斗&背包等功能,支持联机,详情见wiki。
Stars: ✭ 147 (-9.26%)
Mutual labels: canvas
Diagram Maker
A library to display an interactive editor for any graph-like data.
Stars: ✭ 2,086 (+1187.65%)
Mutual labels: canvas
Vue Tree Chart
flexible tree chart using Canvas and Svg, powered by D3.js
Stars: ✭ 149 (-8.02%)
Mutual labels: canvas
Smartopencv
🔥 🔥 🔥 SmartOpenCV是一个OpenCV在Android端的增强库,解决了OpenCV Android SDK在图像预览方面存在的诸多问题,且无需修改OpenCV SDK源码,与OpenCV的SDK解耦
Stars: ✭ 1,869 (+1053.7%)
Mutual labels: canvas
Html2pdf.js
Client-side HTML-to-PDF rendering using pure JS.
Stars: ✭ 2,287 (+1311.73%)
Mutual labels: canvas
Alimask
😷 alimask 是一个使用 canvas 生成类似阿里巴巴内部网站水印图片的 JavaScript 库。
Stars: ✭ 163 (+0.62%)
Mutual labels: canvas
Ngx Gauge
A highly customizable Gauge component for Angular 9+ apps and dashboards
Stars: ✭ 158 (-2.47%)
Mutual labels: canvas
Cax
HTML5 Canvas 2D Rendering Engine - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎
Stars: ✭ 1,864 (+1050.62%)
Mutual labels: canvas
Pychat
webchat via WebSockets/WebRTC that allows messaging/video call/screen sharing
Stars: ✭ 152 (-6.17%)
Mutual labels: canvas
Layaair discard
This is old LayaAir veriosn writetten by ActionScript 3.0 ,now LayaAir is using TypeScript as the Engine Script,Please use https://github.com/layabox/LayaAir instead.
Stars: ✭ 1,858 (+1046.91%)
Mutual labels: canvas
Gantt
Gantt chart library using jsx support SVG, Canvas and SSR
Stars: ✭ 148 (-8.64%)
Mutual labels: canvas
Lucky Canvas
🌼🌼🌼 使用 TypeScript + 原生 Canvas 封装的 JS 抽奖插件【大转盘 / 九宫格】🚀 并内置了一个微型的响应式来处理异步数据渲染,🌈 一套源码适配多端框架 js / jq / vue / react / taro / uni-app / 微信小程序等等...
Stars: ✭ 156 (-3.7%)
Mutual labels: canvas
Matter Js
a 2D rigid body physics engine for the web ▲● ■
Stars: ✭ 12,522 (+7629.63%)
Mutual labels: canvas
Filterous 2
Instagram-like photo manipulation library for Node.js and Javascript on browser
Stars: ✭ 163 (+0.62%)
Mutual labels: canvas
Vue Sign Canvas
一个基于canvas开发,封装于Vue组件的通用手写签名板(电子签名板),支持pc端和移动端,属性支持自定义配置
Stars: ✭ 163 (+0.62%)
Mutual labels: canvas
Paper.js bindings for React Fiber
Demo
http://react-paper.github.io/react-paper-bindings/
Development
Start watching src
with babel
cd react-paper-bindings
npm start
Link the library to the demo
# npm link the library
cd react-paper-bindings
npm link
cd demo
npm link react-paper-bindings
Start demo with create-react-app
cd demo
npm start
If someone knows a better way, please let me know ;)
Similar projects
Example
import React, { Component } from 'react'
import {
View,
Layer,
Group,
Path,
Circle,
Ellipse,
Rectangle,
PointText,
Tool,
} from 'react-paper-bindings'
const ReactLogo = ({ rotation, x, y }) => {
return (
<Group name={'reactLogo'} rotation={rotation}>
<Ellipse
center={[x, y]}
size={[70, 25]}
strokeWidth={2.5}
strokeColor={'#61DAFB'}
/>
<Ellipse
center={[x, y]}
rotation={120}
size={[70, 25]}
strokeWidth={2.5}
strokeColor={'#61DAFB'}
/>
<Ellipse
center={[x, y]}
rotation={240}
size={[70, 25]}
strokeWidth={2.5}
strokeColor={'#61DAFB'}
/>
<Circle
center={[x, y]}
fillColor={'#61DAFB'}
radius={7}
/>
</Group>
)
}
const Paper = ({ activeTool, circles, rectangles, width, height }) => {
return (
<View activeTool={activeTool} width={width} height={height}>
<Layer>
{circles.map(circle => <Circle {...circle} />)}
</Layer>
<Layer>
{rectangles.map(rectangle => <Rectangle {...rectangle} />)}
</Layer>
<Layer>
<Rectangle
center={[width/2, height/2]}
fillColor={'#222222'}
opacity={0.8}
size={[320, 120]}
/>
<PointText
content={'Paper.js'}
fillColor={'white'}
fontFamily={'Courier New'}
fontSize={30}
fontWeight={'bold'}
justification={'center'}
point={[(width/2)+40, (height/2)+10]}
/>
<ReactLogo
rotation={rotation}
x={(width/2)-100}
y={(height/2)}
/>
</Layer>
<Tool
active={activeTool === 'move'}
name={'move'}
onMouseDown={props.moveToolMouseDown}
onMouseDrag={props.moveToolMouseDrag}
onMouseUp={props.moveToolMouseUp}
/>
<Tool
active={activeTool === 'pen'}
name={'pen'}
onMouseDown={props.penToolMouseDown}
onMouseDrag={props.penToolMouseDrag}
onMouseUp={props.penToolMouseUp}
/>
<Tool
active={activeTool === 'circle'}
name={'circle'}
onMouseDown={props.addCircle}
/>
<Tool
active={activeTool === 'rectangle'}
name={'rectangle'}
onMouseDown={props.addRectangle}
/>
</View>
)
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].