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

``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

!snapshot.png

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
- 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: liuhong1.happy@163.com