Comments (6)
You can have multiple Surface elements, each with their own drawing context, and arrange those using CSS. React Canvas does not currently expose the actual canvas drawing context, though this could change with custom components.
In the meantime you might want to check out react-art which will give you more control over the drawing context.
from react-canvas.
No sorry, do not need or want a scenegraph API like react-art, my "scenegraph" has all migrated over into state, so I now refer to it as a datagraph. Well structured state and a canvas context is all that is required.
I am just looking for a good layer and canvas library. How can react-canvas even be a "canvas" solution without exposing the canvas2D context!?
from react-canvas.
Sorry, I misspoke. You actually can access the canvas2D context like so:
componentDidMount: function () {
var ctx = this.refs.surface.getContext();
},
render: function () {
return (
<Surface ref='surface'>..</Surface>
);
}
But once you start drawing into the canvas directly you lose the benefits of the React Canvas model.
from react-canvas.
Great! What is the React-Canvas Model? How does this break? Please explain more, all I want to do is have layers and be able to draw to them using the standard canvas2D API.
from react-canvas.
I'm wondering the same things @zoomclub is. I'm trying to call cxt.moveTo()
and cxt.lineTo()
, and while it appears they exist in CanvasRenderingContext2d.__proto__
I can't figure out the correct way to do what I'm trying to (I just want to draw a simple grid).
from react-canvas.
@zoomclub I meant that react-canvas doesn't try to be an all-purpose drawing engine. Rather, the goal is to find a higher performance rendering backend for mobile devices than DOM, while still having a declarative API that is familiar to developers. See the issue re: shape support to see how we are planning to make the drawing engine more extensible, and allow authors to write custom components that perform their own drawing.
@alexanderritola If you have a specific use case in mind, let me know. Something like react-art or plain canvas might be better for what you're trying to do.
from react-canvas.
Related Issues (20)
- support react v15? HOT 2
- Support opacity in background color?
- Is the react-canvas still updating? HOT 7
- QQ.. Guys, just wondering, how will does react native transform canvas element?.
- Announcing React-RETINA (<canvas> for React v15 & also Preact compatible, and supports variable sized ListView) HOT 13
- <Surface> is OK,but do not render <Group> component
- how to make a loop
- webpack2 HOT 3
- not possible to install with yarn due to dependency in git repo
- about isMounted() cannot be used in es6 HOT 1
- Is this still maintained? HOT 3
- update for support of React v16 please HOT 12
- Module not found: HOT 7
- when Surface's enableCSSLayout is set to true, Image‘s position is not right HOT 1
- How to rotate a line ?
- Whether react 16.12 is supported? HOT 3
- Error on install dependencies HOT 3
- How to download canvas data (toDataURL("image/png"))
- For contributing, the development setup is not working.
- [FORK] react-canvas with added support for React 16, React 17 and React 18 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-canvas.