archive-gh-me/gl-react
1
0
Fork 0
mirror of https://github.com/gre/gl-react.git synced 2026-01-25 16:43:36 +00:00
Code Issues Projects Releases Wiki Activity

improve README

Browse Source
This commit is contained in:
Gaëtan Renaudeau 2015-08-21 17:10:55 +02:00
parent 70e0417dcc
commit bb08ec3688
2 changed files with 8 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
Examples/AdvancedEffects/src/Intro.js
View File

@ -73,54 +73,6 @@ class Intro extends React.Component {
</GL.Target>
</GL.View>;
}
draw () {
/*
const {time, fps} = this.props;
const ctx = this.ctx;
const { width, height } = ctx.canvas;
ctx.clearRect(0, 0, width, height);
let x, y;
x = width / 2;
y = height / 2 - 20;
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.font = "normal 80px Verdana";
ctx.fillStyle = "#00BDF3";
ctx.fillText("GL REACT", x, y);
x = 20;
y = height - 40;
ctx.font = "normal 28px Verdana";
ctx.textBaseline = "middle";
ctx.textAlign = "left";
if (time%1 < 0.6) {
ctx.fillStyle = "#00FF66";
ctx.beginPath();
ctx.arc(x, y, 12, 0, 2*Math.PI);
ctx.fill();
}
x += 26;
ctx.fillStyle = "#00FF66";
ctx.fillText(time.toFixed(2)+"s", x, y);
x += width/5;
ctx.fillStyle = "#fff";
ctx.fillText(fps.toFixed(0)+" fps", x, y);
x += width/5;
ctx.fillStyle = "#999";
ctx.fillText("text drawn with <canvas/>", x, y);
*/
}
}
module.exports = Intro;

12
README.md
View File

@ -4,6 +4,13 @@ WebGL bindings for react to implement complex graphics and image effects, in VDO
See also: [`gl-react-native`](https://github.com/ProjectSeptemberInc/gl-react-native).
## Examples
Open [Examples page](http://projectseptemberinc.github.io/gl-react/) and [read the code](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples).
- [SpringCursor](https://github.com/ProjectSeptemberInc/gl-react/tree/master/Examples/SpringCursor) shows usage with [`react-motion`](https://github.com/chenglou/react-motion).
- [AdvancedEffects' Intro](https://github.com/ProjectSeptemberInc/gl-react/blob/master/Examples/AdvancedEffects/src/Intro.js) shows usage with [`react-canvas`](https://github.com/Flipboard/react-canvas).
### HelloGL Gist
```js
@ -35,6 +42,7 @@ class HelloGL extends React.Component {
![](https://cloud.githubusercontent.com/assets/211411/9386550/432492c6-475c-11e5-9328-f3d5187298c1.jpg)
## Installation
```
@ -59,7 +67,3 @@ Instead of adopting React Native `{uri: "http://..."}` format, you can simply se
Only one child is supported per `GL.Target` and it MUST be either: an `<img />`, a `<video />` or a `<canvas />`.
You might want to take a look at [`react-canvas`](https://github.com/Flipboard/react-canvas) for drawing content.
## Advanced Effects demo
[![](https://cloud.githubusercontent.com/assets/211411/9387055/de7a4732-475e-11e5-8bc3-e86e48814097.png)](http://projectseptemberinc.github.io/gl-react)