react-raphael
v0.9.0
Published
reactify raphael
Downloads
3,151
Maintainers
Readme
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
- react-raphael-map
- react-raphael-chart
- react-raphael-workflow
- react-raphael-scrawl
- react-raphael-mine-sweeping
Quickly Start
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 (<Paper width={300} height={300}>
<Set>
{
data.map(function(ele,pos){
return (<Circle key={pos} x={ele.x} y={ele.y} r={ele.r} attr={ele.attr} animate={ele.animate}/>)
})
}
</Set>
<Set>
<Rect x={30} y={148} width={240} height={150} attr={{"fill":"#10a54a","stroke":"#f0c620","stroke-width":5}}/>
<Ellipse x={150} y={198} ry={40} rx={100} attr={{"fill":"#fff","stroke":"#e11032"}} glow={{width:10,fill:true,color:"#0b8ac9",opacity:1}}/>
<Image src="static/images/5circle.png" x={100} y={170} width={90} height={60} />
<Text x={150} y={258} text="同一个世界 同一个梦想" attr={{"fill":"#fff"}}/>
<Text x={150} y={273} text="One World One Dream" attr={{"fill":"#fff"}}/>
<Path d={["M150 287L150 287"]} animate={Raphael.animation({"path": ["M80 287L220 287"]},500,"<>")} attr={{"stroke":"#fff"}}/>
<Line x1={150} y1={290} x2={150} y2={290} animate={Raphael.animation({ x1:80, x2:220},500,"<>")} attr={{"stroke":"#fff"}}/>
</Set>
</Paper>)
}
}
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:"" }
- width
- 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
orarray
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.
- attr
- 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
- x
- 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
- x
- 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
- src
- Path
Extends Element & Creates a path element by given path data string
- d
string
path string in SVG format
- d
- 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
- x
- 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
- x
- 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
- x
- 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
- x1
All Element Ref Function
- Paper
- getPaper
function
paper of the component
- getPaper
- Set
- getSet
function
set of the component
- getSet
- Element
- getElement
function
element of the component
- getElement
Raphael & Utils
- Raphael
you can see
http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael - Utils
- createPaper
function
create a paper byRaphael()
- updatePaper
function
update a paper - removePaper
function
remove a paper - create
function
create elements or a set bypaper.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
- createPaper
Contact
Email: [email protected]