Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/liuhong1happy/react-raphael
reactify raphael
https://github.com/liuhong1happy/react-raphael
raphael react
Last synced: 2 months ago
JSON representation
reactify raphael
- Host: GitHub
- URL: https://github.com/liuhong1happy/react-raphael
- Owner: liuhong1happy
- License: mit
- Created: 2016-11-09T09:42:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2017-08-15T01:41:12.000Z (over 7 years ago)
- Last Synced: 2024-10-07T08:08:38.520Z (3 months ago)
- Topics: raphael, react
- Language: JavaScript
- Size: 209 KB
- Stars: 50
- Watchers: 2
- Forks: 10
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-raphael
[](https://www.npmjs.com/package/react-raphael)
[](https://www.npmjs.com/package/react-raphael)
reactify raphael
## Install
# or specify the externals in webpack config
npm install --save raphael
# install react-raphael in your react-raphael project
npm install --save react-raphael
## Example
- [react-raphael-example](https://github.com/liuhong1happy/react-raphael-example)
- [react-raphael-map](https://github.com/liuhong1happy/react-raphael-map)
- [react-raphael-chart](https://github.com/liuhong1happy/react-raphael-chart)
- [react-raphael-workflow](https://github.com/liuhong1happy/react-raphael-workflow)
- [react-raphael-scrawl](https://github.com/liuhong1happy/react-raphael-scrawl)
- [react-raphael-mine-sweeping](https://github.com/liuhong1happy/react-raphael-mine-sweeping)
## Quickly Start
```js
var React = require('react');
var ReactDOM = require('react-dom');
const {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');
class App extends React.Component{
render(){
var data = [
{x:50,y:50,r:40,attr:{"stroke":"#0b8ac9","stroke-width":5},animate:Raphael.animation({cx:60},500,"<>")},
{x:100,y:100,r:40,attr:{"stroke":"#f0c620","stroke-width":5},animate:Raphael.animation({cx:105},500,"<>")},
{x:150,y:50,r:40,attr:{"stroke":"#1a1a1a","stroke-width":5}},
{x:200,y:100,r:40,attr:{"stroke":"#10a54a","stroke-width":5},animate:Raphael.animation({cx:195},500,"<>")},
{x:250,y:50,r:40,attr:{"stroke":"#e11032","stroke-width":5},animate:Raphael.animation({cx:240},500,"<>")}
]
return (
{
data.map(function(ele,pos){
return ()
})
}
")} attr={{"stroke":"#fff"}}/>
")} attr={{"stroke":"#fff"}}/>
)
}
}
```
## Snapshot
## API
#### All Element Props
- Paper
- width `number` width of the canvas.
- height `number` height of the canvas.
- container `object` props of the canvas's container.`default value: { style:{}, className:"" }`
- Element
- attr `object` Sets the attributes of the element.
- animate `object` Creates and starts animation for given element.
- animateWith `object` Acts similar to Element.animate, but ensure that given animation runs in sync with another given element.
- click `function` Adds event handler for click for the element.
- data `object` Adds or retrieves given value asociated with given key.
- dblclick `function` Adds event handler for double click for the element.
- drag `object` Adds event handlers for drag of the element. `object {move,start,end,mcontext,scontext,econtext}`
- glow `function` Return set of elements that create glow-like effect around given element.
- hover `object` Adds event handlers for hover for the element. `object {in,out,icontext,ocontext}`
- hide `boolean` Makes element invisible.
- mousedown `function` Adds event handler for mousedown for the element.
- mousemove `function` Adds event handler for mousemove for the element.
- mouseout `function` Adds event handler for mouseout for the element.
- mouseover `function` Adds event handler for mouseover for the element.
- mouseup `function` Adds event handler for mouseup for the element.
- load `function` Adds event handler for load for the element.
- rotate `object` Adds rotation by given angle around given point to the list of transformations of the element.
- scale `object` Adds scale by given amount relative to given point to the list of transformations of the element.
- stop `boolen` Stops animation for given element.
- toBack `boolean` Moves the element so it is the furthest from the viewer’s eyes, behind other elements.
- toFront `boolean` Moves the element so it is the closest to the viewer’s eyes, on top of other elements.
- touchcancel `function` Adds event handler for touchcancel for the element.
- touchend `function` Adds event handler for touchend for the element.
- touchmove `function` Adds event handler for touchmove for the element.
- touchstart `function` Adds event handler for touchstart for the element.
- transform `string` or `array` Adds transformation to the element which is separate to other attributes, i.e. translation doesn’t change x or y of the rectange. The format of transformation string is similar to the path string syntax:`"t100,100r30,100,100s2,2,100,100r45s1.5"`
- translate `object` Adds translation by given amount to the list of transformations of the element.
- update `function` Adds event handler for update for the element.
- Set `Extends Element & Container Elements`
- Circle `Extends Element & Draws a circle`
- x `number` x coordinate of the centre
- y `number` y coordinate of the centre
- r `number` radius
- Ellipse `Extends Element & Draws a ellipse`
- x `number` x coordinate of the centre
- y `number` y coordinate of the centre
- rx `number` horizontal radius
- ry `number` vertical radius
- Image `Extends Element & Embeds an image into the surface`
- src `string` URI of the source image
- x `number` x coordinate of the centre
- y `number` y coordinate of the centre
- width `number` width of the image
- height `number` height of the image
- Path `Extends Element & Creates a path element by given path data string`
- d `string` path string in SVG format
- Print `Extends Element & Creates set of shapes to represent given font at given position with given size`
- x `number` x position of the text
- y `number` y position of the text
- text `string` text to print
- font-family `string` family of font object
- font-weight `string` weight of font object
- font-style `string` style of font object
- font-stretch `string` stretch of font object
- font-size `number` size of the font, default is 16
- origin `string` could be "baseline" or "middle", default is "middle"
- letter-spacing `number` number in range -1..1, default is 0
- Rect `Extends Element & Draws a circle`
- x `number` x coordinate of the top left corner
- y `number` y coordinate of the top left corner
- width `number` width of the rect
- height `number` height of the rect
- r `number` radius for rounded corners, default is 0
- Text `Extends Element & Draws a text string & If you need line breaks, put “\n” in the string`
- x `number` x coordinate position
- y `number` y coordinate position
- text `string` The text string to draw
- Line `Extends Path & Draws a line`
- x1 `number` x coordinate of the start point
- y1 `number` y coordinate of the start point
- x2 `number` x coordinate of the end point
- y2 `number` y coordinate of the end point
#### All Element Ref Function
- Paper
- getPaper `function` paper of the component
- Set
- getSet `function` set of the component
- Element
- getElement `function` element of the component
#### Raphael & Utils
- Raphael `you can see ` [http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael](http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael)
- Utils
- createPaper `function` create a paper by `Raphael()`
- updatePaper `function` update a paper
- removePaper `function` remove a paper
- create `function` create elements or a set by `paper.xxx`
- createElement `function` call create to create a element
- createSet `function` call create to create a set
- updateElement `function` update elements or a set
- removeSet `function` remove a set from paper
- removeElement `function` remove a element from paper
- papers `array` all paper instance
- elements `array` all elements or set of the only paper instance
- findParentById `function` find parent of element by id
# Contact
Email: [[email protected]](mailto:[email protected])