# react-raphael [![Version](https://img.shields.io/npm/v/react-raphael.svg)](https://www.npmjs.com/package/react-raphael) [![Downloads](https://img.shields.io/npm/dt/react-raphael.svg)](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 ![snapshot.png](images/snapshot.svg) ## 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: [liuhong1.happy@163.com](mailto:liuhong1.happy@163.com)