All Projects → react-paper → React Paper Bindings

react-paper / React Paper Bindings

Paper.js bindings for React

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
Zen 3d
JavaScript 3D library.
Stars: ✭ 155 (-4.32%)
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
Spectrogram
Audio spectrogram in canvas.
Stars: ✭ 158 (-2.47%)
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
Proton
Javascript particle animation library
Stars: ✭ 1,958 (+1108.64%)
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
We Cropper
微信小程序图片裁剪工具
Stars: ✭ 1,972 (+1117.28%)
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
Mesh.js
A graphics system born for visualization 😘.
Stars: ✭ 156 (-3.7%)
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].