https://github.com/fusioncharts/redraphael
JavaScript Graphics library built on top of raphaeljs to enhance rendering graphics on the browser.
https://github.com/fusioncharts/redraphael
Last synced: 3 months ago
JSON representation
JavaScript Graphics library built on top of raphaeljs to enhance rendering graphics on the browser.
- Host: GitHub
- URL: https://github.com/fusioncharts/redraphael
- Owner: fusioncharts
- License: mit
- Created: 2013-09-18T17:10:25.000Z (almost 12 years ago)
- Default Branch: develop
- Last Pushed: 2025-03-10T08:07:29.000Z (4 months ago)
- Last Synced: 2025-04-02T01:03:01.437Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 14.3 MB
- Stars: 22
- Watchers: 11
- Forks: 33
- Open Issues: 23
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# RedRaphael
## Install from npm
```sh
npm install redraphael
```
## Draw a basic rectangle using `RedRaphael`
```javascript
var RedRaphael = require("redraphael")
RedRaphael(10, 10, 600, 400, function () {
var paper = (window.pap = this)
// Draw a red rectangle with red fill color.
rect = paper
.rect({
x: 0,
y: 0,
width: 500,
height: 200,
})
.attr({
fill: "#FF0000",
})
})
```
## Usage
RedRaphael is a fork of Raphael with a number of added features and slightly changed development philosophy.
The best place to start is the API and usage documentation.
To learn how to use RedRaphael visit [documentation page](http://fusioncharts.github.io/redraphael/)
## RedRaphael specific features
Here is a brief overview of added benefits of using RedRaphael:
### Group
Creating a RedRaphael group
```js
var mygroup = paper.group([optional_group_name])
```
Adding elements to a group
```js
var myrect = paper.rect(x, y, width, height, mygroup)
```
```js
/*
NOTE: Irrespective of the number of arguments needed to be passed to the Element construtor,
passing the group element as the last argument will ensure that the element gets added to the group.
So the following are all valid ways of adding elements to groups.
*/
var myrect = paper.rect(mygroup)
var myrect = paper.rect(x, y, mygroup)
```
You can also add an existing element to a group using the `appendChild` method.
```js
// Added directly to the paper
var mycircle = paper.circle(x, y, radius)
mygroup.appendChild(mycircle)
```
Groups come in especially handy when you have to perform transformations on the collection as a whole.
### Followers & Stalkers
Any element in RedRaphael can be converted into a follower element (or stalker element) by invoking the
`follow` method.
`element.follow(, [supervisor_function], ['before' || 'after']);`
The supervisor function, when provided, governs how the target element's attributes control the attributes
of the follower element. The supervisor function is invoked whenever the attributes of the target element
are changed using the `element.attr` method.
The third argument, when provided will make the follower element position the itself w.r.t to the target
element based on the value of the parameter. If the target element is now moved around the DOM tree using
Raphael methods `insertBefore` or `insertAfter` etc, the follower (now a stalker) will also move along with
it.
[Check out a demo here](http://jsfiddle.net/sushantbs/xZrwe/4/)
### Custom Attributes
With RedRaphaelel, custom attributes can be added per element using `element.ca` object.
```js
var rectEl = paper.rect(x, y, width, height)
rectEl.ca.borderWidth = function (value) {
this.attr("stroke-width", value)
// Returning false will prevent the attribute from being processed
// any further by the element.attr method
return false
}
// Using the custom attributes
rectEl.attr("borderWidth", "5")
```
Note: The original Raphael way of adding [custom attributes](http://raphaeljs.com/reference.html#Paper.ca) is also supported.
### Raphael.define
RedRaphel has encapsulated all the ways of extending the framework in the `define` API.
```js
Raphael.define(name, initializing_funciton, custom_attributes, element_specific_methods, pre_defined_eventlisteners)
Raphael.define({
name: "componentName",
componentName: initializing_funciton,
ca: {
/* custom_attributes */
},
fn: {
/* element_specific_methods */
},
e: {
/* pre_defined_eventlisteners */
},
data: {
/* element_specific_data */
},
})
```
[See it in action](http://jsfiddle.net/sushantbs/khBQj/6/)
## Undocumented features and improvements
- array as multi-line text
- directly pass attr object during element construction
- Support for alpha on every gradient stop in SVG and support for first and last alpha in VML
- Support for radial gradient on every shape and support for gradient radius using `xr(fx,fy,r,cx,cy,unit)`
- Suport for linear gradient options `angle(units,spread)`
- Support for `shape-rendering` attribute
- `R.cispBound` amd `Element.crisp` for avoiding sub-pixel blurring
- Global mouseUp tracking using el.mouseup(fn, scope, true);
- Support for customizable dash-style
- Support for attribute `key` in attr.\* events
- Support for Raphael.ca for common customAttributes across papers
- Support for text-bound: [stroke, fill, stroke-width, padding, corner-radius, dash-style] on texts
- Support for opacity in fill color (rgba, hsla, etc) for elements
- Support for `visibility` on elements via attr
- Support for element rotation via rotation attr
- Support for `vertical-align` attr on text