{"id":15893211,"url":"https://github.com/liuhong1happy/react-raphael","last_synced_at":"2025-03-20T12:34:15.383Z","repository":{"id":57343037,"uuid":"73270444","full_name":"liuhong1happy/react-raphael","owner":"liuhong1happy","description":"reactify raphael","archived":false,"fork":false,"pushed_at":"2017-08-15T01:41:12.000Z","size":214,"stargazers_count":50,"open_issues_count":7,"forks_count":10,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-07T08:08:38.520Z","etag":null,"topics":["raphael","react"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/liuhong1happy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-09T09:42:28.000Z","updated_at":"2023-12-20T13:52:41.000Z","dependencies_parsed_at":"2022-09-16T03:02:17.835Z","dependency_job_id":null,"html_url":"https://github.com/liuhong1happy/react-raphael","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-raphael","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-raphael/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-raphael/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/liuhong1happy%2Freact-raphael/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/liuhong1happy","download_url":"https://codeload.github.com/liuhong1happy/react-raphael/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221766762,"owners_count":16877346,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["raphael","react"],"created_at":"2024-10-06T08:08:53.308Z","updated_at":"2024-10-28T02:21:30.116Z","avatar_url":"https://github.com/liuhong1happy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-raphael\n\n[![Version](https://img.shields.io/npm/v/react-raphael.svg)](https://www.npmjs.com/package/react-raphael)\n[![Downloads](https://img.shields.io/npm/dt/react-raphael.svg)](https://www.npmjs.com/package/react-raphael)\n\nreactify raphael\n\n## Install\n\n    # or specify the externals in webpack config\n    npm install --save raphael\n    # install react-raphael in your react-raphael project\n\tnpm install --save react-raphael\n\n## Example\n\n- [react-raphael-example](https://github.com/liuhong1happy/react-raphael-example)\n- [react-raphael-map](https://github.com/liuhong1happy/react-raphael-map)\n- [react-raphael-chart](https://github.com/liuhong1happy/react-raphael-chart)\n- [react-raphael-workflow](https://github.com/liuhong1happy/react-raphael-workflow)\n- [react-raphael-scrawl](https://github.com/liuhong1happy/react-raphael-scrawl)\n- [react-raphael-mine-sweeping](https://github.com/liuhong1happy/react-raphael-mine-sweeping)\n\n## Quickly Start\n\n```js\nvar React = require('react');\nvar ReactDOM = require('react-dom');\n\nconst {Raphael,Paper,Set,Circle,Ellipse,Image,Rect,Text,Path,Line} = require('react-raphael');\n\nclass App extends React.Component{\n    render(){\n        var data = [\n            {x:50,y:50,r:40,attr:{\"stroke\":\"#0b8ac9\",\"stroke-width\":5},animate:Raphael.animation({cx:60},500,\"\u003c\u003e\")},\n            {x:100,y:100,r:40,attr:{\"stroke\":\"#f0c620\",\"stroke-width\":5},animate:Raphael.animation({cx:105},500,\"\u003c\u003e\")},\n            {x:150,y:50,r:40,attr:{\"stroke\":\"#1a1a1a\",\"stroke-width\":5}},\n            {x:200,y:100,r:40,attr:{\"stroke\":\"#10a54a\",\"stroke-width\":5},animate:Raphael.animation({cx:195},500,\"\u003c\u003e\")},\n            {x:250,y:50,r:40,attr:{\"stroke\":\"#e11032\",\"stroke-width\":5},animate:Raphael.animation({cx:240},500,\"\u003c\u003e\")}\n        ]\n        return (\u003cPaper width={300} height={300}\u003e\n                       \u003cSet\u003e    \n                        {\n                            data.map(function(ele,pos){\n                                return (\u003cCircle key={pos} x={ele.x} y={ele.y} r={ele.r} attr={ele.attr} animate={ele.animate}/\u003e)\n                            })\n                        }\n                        \u003c/Set\u003e\n\t\t\t\t\t\t\u003cSet\u003e\n                            \u003cRect x={30} y={148} width={240} height={150} attr={{\"fill\":\"#10a54a\",\"stroke\":\"#f0c620\",\"stroke-width\":5}}/\u003e\n\t\t\t\t\t\t\t\u003cEllipse x={150} y={198} ry={40} rx={100} attr={{\"fill\":\"#fff\",\"stroke\":\"#e11032\"}} glow={{width:10,fill:true,color:\"#0b8ac9\",opacity:1}}/\u003e\n                            \u003cImage src=\"static/images/5circle.png\" x={100} y={170} width={90} height={60} /\u003e\n\t\t\t\t\t\t\t\u003cText x={150} y={258} text=\"同一个世界 同一个梦想\" attr={{\"fill\":\"#fff\"}}/\u003e\n\t\t\t\t\t\t\t\u003cText x={150} y={273} text=\"One World One Dream\" attr={{\"fill\":\"#fff\"}}/\u003e\n\t\t\t\t\t\t\t\u003cPath d={[\"M150 287L150 287\"]} animate={Raphael.animation({\"path\": [\"M80 287L220 287\"]},500,\"\u003c\u003e\")} attr={{\"stroke\":\"#fff\"}}/\u003e\n                            \u003cLine x1={150} y1={290} x2={150} y2={290} animate={Raphael.animation({ x1:80, x2:220},500,\"\u003c\u003e\")} attr={{\"stroke\":\"#fff\"}}/\u003e\n\t\t\t\t\t\t\u003c/Set\u003e\n                \u003c/Paper\u003e)\n    }\n}\n```\n\n## Snapshot\n\n![snapshot.png](images/snapshot.svg)\n\n## API\n\n#### All Element Props\n\n- Paper \n    - width `number` width of the canvas.\n    - height  `number` height of the canvas.\n\t- container `object`  props of the canvas's container.`default value: { style:{}, className:\"\" }`\n- Element\n\t- attr `object` Sets the attributes of the element.\n\t- animate `object` Creates and starts animation for given element.\n\t- animateWith `object` Acts similar to Element.animate, but ensure that given animation runs in sync with another given element.\n\t- click `function` Adds event handler for click for the element.\n\t- data `object` Adds or retrieves given value asociated with given key. \n\t- dblclick `function` Adds event handler for double click for the element.\n\t- drag `object` Adds event handlers for drag of the element. `object {move,start,end,mcontext,scontext,econtext}`\n\t- glow `function` Return set of elements that create glow-like effect around given element.\n\t- hover `object` Adds event handlers for hover for the element. `object {in,out,icontext,ocontext}`\n\t- hide `boolean` Makes element invisible. \n\t- mousedown `function` Adds event handler for mousedown for the element.\n\t- mousemove `function` Adds event handler for mousemove for the element.\n\t- mouseout `function` Adds event handler for mouseout for the element.\n\t- mouseover `function` Adds event handler for mouseover for the element.\n\t- mouseup `function` Adds event handler for mouseup for the element.\n    - load `function` Adds event handler for load for the element.\n\t- rotate `object` Adds rotation by given angle around given point to the list of transformations of the element.\n\t- scale `object` Adds scale by given amount relative to given point to the list of transformations of the element.\n    - stop `boolen` Stops animation for given element.\n\t- toBack `boolean` Moves the element so it is the furthest from the viewer’s eyes, behind other elements.\n\t- toFront `boolean` Moves the element so it is the closest to the viewer’s eyes, on top of other elements.\n\t- touchcancel `function` Adds event handler for touchcancel for the element.\n\t- touchend `function` Adds event handler for touchend for the element.\n\t- touchmove `function` Adds event handler for touchmove for the element.\n\t- touchstart `function` Adds event handler for touchstart for the element.\n\t- 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\"`\n\t- translate `object` Adds translation by given amount to the list of transformations of the element.\n\t- update `function` Adds event handler for update for the element.\n- Set `Extends Element \u0026 Container Elements`\n- Circle  `Extends Element \u0026 Draws a circle`\n    - x `number` x coordinate of the centre\n    - y `number` y coordinate of the centre\n    - r `number` radius\n- Ellipse `Extends Element \u0026 Draws a ellipse`\n    - x `number` x coordinate of the centre\n    - y `number` y coordinate of the centre\n    - rx `number` horizontal radius\n\t- ry `number` vertical radius\n- Image `Extends Element \u0026 Embeds an image into the surface`\n\t- src `string` URI of the source image\n    - x `number` x coordinate of the centre\n    - y `number` y coordinate of the centre\n    - width `number` width of the image\n\t- height `number` height of the image\n- Path `Extends Element \u0026 Creates a path element by given path data string`\n    - d `string` path string in SVG format\n- Print `Extends Element \u0026 Creates set of shapes to represent given font at given position with given size`\n    - x `number` x position of the text\n    - y `number` y position of the text\n    - text `string` text to print\n    - font-family `string` family of font object\n    - font-weight `string` weight of font object\n    - font-style `string` style of font object\n    - font-stretch `string` stretch of font object\n    - font-size `number` size of the font, default is 16\n    - origin `string` could be \"baseline\" or \"middle\", default is \"middle\"\n    - letter-spacing `number` number in range -1..1, default is 0\n- Rect `Extends Element \u0026 Draws a circle`\n    - x `number` x coordinate of the top left corner\n    - y `number` y coordinate of the top left corner\n    - width `number` width of the rect\n\t- height `number` height of the rect\n    - r `number` radius for rounded corners, default is 0\n- Text `Extends Element \u0026 Draws a text string \u0026 If you need line breaks, put “\\n” in the string`\n    - x `number` x coordinate position\n    - y `number` y coordinate position\n    - text `string` The text string to draw\n- Line `Extends Path \u0026 Draws a line`\n    - x1 `number` x coordinate of the start point\n    - y1 `number` y coordinate of the start point\n    - x2 `number` x coordinate of the end point\n\t- y2 `number` y coordinate of the end point\n    \n#### All Element Ref Function\n\n- Paper\n\t- getPaper `function` paper of the component\n- Set\n\t- getSet `function` set of the component\n- Element\n\t- getElement `function` element of the component\n\n#### Raphael \u0026 Utils\n\n- Raphael `you can see ` [http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael](http://dmitrybaranovskiy.github.io/raphael/reference.html#Raphael)\n- Utils\n\t- createPaper `function` create a paper by `Raphael()`\n    - updatePaper `function` update a paper\n    - removePaper `function` remove a paper\n\t- create `function` create elements or a set by `paper.xxx`\n\t- createElement `function` call create to create a element\n\t- createSet `function` call create to create a set\n    - updateElement `function` update elements or a set \n\t- removeSet `function` remove a set from paper \n\t- removeElement `function` remove a element from paper \n\t- papers `array` all paper instance\n\t- elements `array` all elements or set of the only paper instance\n    - findParentById `function` find parent of element by id\n\t\n# Contact\n\nEmail: [liuhong1.happy@163.com](mailto:liuhong1.happy@163.com)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliuhong1happy%2Freact-raphael","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fliuhong1happy%2Freact-raphael","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fliuhong1happy%2Freact-raphael/lists"}