Giter Site home page Giter Site logo

redraphael's Introduction

RedRaphael - A JavaScript graphics library on steroids!

Build Status

Install from npm

npm install redraphael

Draw a basic rectangle using RedRaphael

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 docuentation.

To learn how to use RedRaphael visit documentation page

RedRaphael specific features

Here is a brief overview of added benefits of using RedRaphael.

Group

Creating a RedRaphael group

var mygroup = paper.group([optional_group_name]);

Adding elements to a group

var myrect = paper.rect(x, y, width, height, mygroup);
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.

var mycircle = paper.circle(x, y, radius); // Added directly to the paper

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(<target_element>, [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

Custom Attributes

With RedRaphaelel, custom attributes can be added per element using element.ca object.

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 is also supported.

Raphael.define

RedRaphel has encapsulated all the ways of extending the framework in the define API.

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

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

Guidelines for contribution

Fork and send PR!

Analytics

redraphael's People

Contributors

adotg avatar arnab003 avatar ashok1994 avatar austin-8 avatar ayanghatak avatar ayanonly1 avatar chartistdev avatar kaushalaccolite avatar kingshukbasak avatar ktkaushik avatar meherhowji-5740 avatar n0x3u5 avatar n0x3u5-fc avatar nilanjanfc avatar paresh-accolite avatar pratyushcrd avatar pratyushfc avatar priyanjitdey94 avatar rahul9046 avatar rohanoid5 avatar rohitb4 avatar rohitkr avatar sanjaybhan avatar shamasis avatar siawo avatar siawo-fc avatar siddharthapaul001 avatar sushantfc avatar vishal-appwrk avatar yakuzaaaa avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redraphael's Issues

Clear elements of group

Feature suggestion

Group.clear()
A function on group to clear the elements of the group similar to set.clear present in Raphael.js

Extend support for default easing animations for paper element

Currently there is support for only 'linear' easing animation for the paper element, which remains hardcoded in raphael.core.js file as:
// For now it supports only 'linear' animation style
effect = 'linear';

But Raphael provides a list of default easing formulas for animating the elements. A beautiful illustration of them is shown here.

So, in order to have a sync in animation with other elements contained in the paper, paper element should also be supported with the default easing animation formulas namely:

  • “linear”
  • “<” or “easeIn” or “ease-in”
  • “>” or “easeOut” or “ease-out”
  • “<>” or “easeInOut” or “ease-in-out”
  • “backIn” or “back-in”
  • “backOut” or “back-out”
  • “elastic”
  • “bounce”

Applying attr for the non-availableAnim attributes

In redraphael, we have a list of availableAnimAttrs e.g. "stroke-opacity", ""stroke-width", etc. Apart from these other attributes are not even applied if asked to animate.

To illustrate the fact, say elem is the concerned element,

elem.animate({ path: <Array>, 'stroke-opacity': <Number>, 'stroke-dasharray': <Array>, 'stroke-linecap': <String> }, <animDuration>)

As path and 'stroke-opacity' are animatable or to say at present, we have a support for them, gets applied with an animation but for the other two attributes(namely 'stroke-dasharray' and 'stroke-linecap') do not even get applied as:

elem.attr({ 'stroke-dasharray': <Array>, 'stroke-linecap': <String> })

That is where I suggest some improvement. We do not have code for supporting animation of these attributes, thats fine, but if an user gives it should at least get applied.

Followers not in sync with the leader's updates.

Create a text, e.g.
t = paper.text().attr({x:100,y:100, text: "Ayan", 'text-bound': ["#ff0000","#00ff00",2,5,10]});

Now keep on applying for a repeated times

t.attr({transform: 't10,10'});

After some transformations, text although remains intact, the bounding-box(i.e. the text-bound) gets shifted with no capping.

`tuneText` does not utilise `getComputedStyle` for `line-height`

The tuneText function for SVG and (equivalent for VML) utilises getComputedStyle to procure effective font-size of a text, but does not do the same to determine the effective line-height. This is counter productive when using CSS to improve rendering performance of text elements.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.