Cross-browser vector graphics the easy way.
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.
Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy. Currently library supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Download and include raphael.js into your HTML page, then use it as simply as:
// Creates canvas 320 Ă— 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");
// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");
Function that creates a canvas on which to draw.
- container HTMLElement or string
- width number
- height number
or
- x number
- y number
- width number
- height number
// Creates canvas 320 Ă— 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);
var paper = Raphael(document.getElementById("notepad"), 320, 200);
var paper = Raphael("notepad", 320, 200);
Each object created on the canvas share the same generic methods:
Gives you reference to DOM object, so you can assign event handlers or just randomly mess around.
var c = paper.circle(10, 10, 10);
c.node.onclick = function () { c.attr("fill", "red"); };
Rotates element by given degree around its center.
- degree number Degree of rotation (0 – 360°)
- isAbsolute boolean [optional] Will rotation be relative or absolute
var c = paper.circle(10, 10, 10);
c.rotate(45);
Moves element around the canvas by given dimensions.
- dx number Pixels of translation by X
- dy number Pixels of translation by Y
var c = paper.circle(10, 10, 10);
c.translate(10, 10);
Scales element by given amount of times.
- Xtimes number
- Ytimes number
var c = paper.circle(10, 10, 10);
c.scale(1.5, 1.5);
Sets attributes of elements.
- params object
or
- attributeName string
- value string
- cx number
- cy number
- dasharray string [“-”, “.”, “-.”, “-..”, “. ”, “- ”, “--”, “- .”, “--.”, “--..”]
- fill colour
- fill-opacity number
- font string
- font-family string
- font-size number
- font-weight string
- gradient object
- height number
- opacity number
- path pathString
- r number
- rotation number
- rx number
- ry number
- scale CSV
- stroke colour
- stroke-linecap string [“butt”, “square”, “round”, “miter”]
- stroke-linejoin string [“butt”, “square”, “round”, “miter”]
- stroke-miterlimit number
- stroke-opacity number
- stroke-width number
- translation CSV
- width number
- x number
- y number
var c = paper.circle(10, 10, 10);
c.attr("fill", "black");
c.attr({fill: "#000", stroke: "#f00", opacity: 0.5});
Linearly changes attribute from current to specified in given amount of milliseconds.
- newAttrs object
- ms number
- callback function [optional]
var c = paper.circle(10, 10, 10);
c.animate({cx: 20, r: 20}, 2000);
Returns dimensions of given element.
var c = paper.circle(10, 10, 10);
var width = c.getBBox().width;
Moves element to front in hierarchy.
var c = paper.circle(10, 10, 10);
c.toFront();
Moves element to back in hierarchy.
var c = paper.circle(10, 10, 10);
c.toBack();
Creates circle.
- x number X coordinate of the centre
- y number Y coordinate of the centre
- r number radius
var c = paper.circle(10, 10, 10);
Creates rectangle.
- x number X coordinate of top left corner
- y number Y coordinate of top left corner
- width number
- height number
- r number [optional] radius for rounded corners, default is 0
// regular rectangle
var c = paper.rect(10, 10, 10, 10);
// rounded rectangle
var c = paper.rect(10, 10, 100, 50, 10);
Creates an ellipse.
- x number X coordinate of the centre
- y number X coordinate of the centre
- rx number Horisontal radius
- ry number Vertical radius
var c = paper.ellipse(100, 100, 30, 40);
Embeds an image in SVG/VML area.
- src string
- x number
- y number
- width number
- height number
var c = paper.image("apple.png", 10, 10, 100, 100);
Initialise path drawing. In general case this function returns empty path object. To draw path use built in methods like lineTo and curveTo.
- params object Similar to object for attr method
- pathString string [optional] path in SVG path string format. See SVG documentation.
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
Sets trigger to count all following units as absolute ones, unless said otherwise. [on by default]
Usage
var c = paper.path({stroke: "#036"}).absolutely()
.moveTo(10, 10).lineTo(50, 50);
Sets trigger to count all following units as relative ones, unless said otherwise.
var c = paper.path({stroke: "#036"}).relatively()
.moveTo(10, 10).lineTo(50, 50);
Moves drawing point to given coordinates.
- x number
- y number
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
Draws straight line to given coordinates.
- x number
- y number
var c = paper.path({stroke: "#036"}).moveTo(10, 10).lineTo(50, 50);
Draws curved line to given coordinates. Line will have horizontal anchors on start and on finish.
- x number
- y number
- width number
var c = paper.path({stroke: "#036"}).moveTo(10, 10).cplineTo(50, 50);
Draws bicubic curve to given coordinates.
- x1 number
- y1 number
- x2 number
- y2 number
- x3 number
- y3 number
var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);
Draws quadratic curve to given coordinates.
- x1 number
- y1 number
- x2 number
- y2 number
var c = paper.path({stroke: "#036"}).moveTo(10, 10).curveTo(10, 15, 45, 45, 50, 50);
Draws quarter of circle form current point.
- r number
- dir string two letters direction
Possible dir values
- lu: left up
- ld: left down
- ru: right up
- rd: right down
- ur: up right
- ul: up left
- dr: down right
- dl: down left
var c = paper.path({stroke: "#036"}).moveTo(10, 10).addRoundedCorner(10, "rd");
Closes the path.
var c = paper.path({stroke: "#036"}).moveTo(10, 10).andClose();
http://www.opensource.org/licenses/mit-license.php
Copyright (c) 2008 Dmitry Baranovskiy (http://raphaeljs.com)