search

paperjs / paper.js

The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey
http://paperjs.org
Other
14.5k stars 1.23k forks source link

Using paper.js with react-native #1268

Closed clozr closed 7 years ago

clozr commented 7 years ago

I am trying to use paper.js with react-native but it fails in getCanvas. Any idea how I may be able to work around it.

lehni commented 7 years ago

I've never used react-native. Perhaps you could provide a small test-case for reproduction, or describe the steps required to set things up?

clozr commented 7 years ago

I set up a git repository for you. You can clone this. git clone https://github.com/clozr/react-native-paperjs-example. You will need IOS or Android tools to build and launch the project.

lehni commented 7 years ago

Thanks! But getting this to compile and run may be bit much for me. Are you sure that canvas even works in react-native? A bit of googling brings this up, but that looks unfinished:

https://github.com/iddan/react-native-canvas

gentlefox commented 7 years ago

React Canvas by Flipboard is maintained (unlike react-native-canvas) and dedicated to mobile performance. It does appear to be predominantly aimed at mobile web instead of native, but worth a look.

lehni commented 7 years ago

I think those are two separate things though?

clozr commented 7 years ago

Lehni, Is there a way around that we don't need canvas to use paperjs. The way react native will work is you will need to get the drawing spec and use react-native-svg to render the component. You may be able to use node-canvas perhaps with rn-nodify. I haven't tried that yet.

lehni commented 7 years ago

There is no SVG backend at the moment, Canvas is the requirement if you want to actually draw something. You can also use the library as you would in a worker to just do vector graphics processing, of course, but that's not the point here.

lehni commented 7 years ago

For displaying content, it looks like fallback to WebView is the only possibility right now. That's also what react-native-canvas is doing internally...

More info here

clozr commented 7 years ago

I agree...how about using paperjs to do vector processing e.g path optimization etc. so that we can use part of the paperjs awesomeness in conjunction with react-native-svg? react-native js doesn't have web-worker.

lehni commented 7 years ago

You can use exportSVG() to export static SVG and display that. Anything beyond that means we finally need to build that SVG backend that we never find time for :)

lehni commented 7 years ago

I am going to close this issue as there is no easy fix for this scenario at the moment until react-native has a proper, native canvas element.

artdevgame commented 6 years ago

@clozr Did you get any further with this problem? I'd really like to use Paper.js inside a RN project too.

FlashTang commented 3 years ago

@clozr Did you get any further with this problem? I'd really like to use Paper.js inside a RN project too.

Did you find a way to use Paper.js in RN ?