I switched from raphael to svg.js for all my vector graphics because svg.js is only a fraction of raphael's size and supports much more core SVG features. Therefore this plugin is no longer supported. Similar functionality can be found in the the svg.shapes.js plugin for svg.js.
An extension to the Raphael Vector Library.
Currently it provides the following shapes:
- polygon (throw in raw SVG polygon string)
- n-gon
- star
Basic usage:
// Creates canvas 800 × 500 at 10, 10
var paper = Raphael(10, 10, 800, 500);
Add a polygon
// Creates an polygon
var raw_poly = "47.013,30.086 0.087,45.24 49.609,26.648 50.346,17.421 63.277,21.084 110.657,0.228";
var polygon = paper.polygon(50, 60, raw_poly);
Update an polygon
// Updates the polygon
var new_poly = "47.013,30.086 0.087,45.24 49.609,26.648 50.346,17.421 63.277,21.084 110.657,0.228 69.127,21.084 97.674,17.421 59.075,26.648 29.338,45.24";
ngon.sett("points", new_poly);
Add a hexagon
// Creates an n-gon at x 50 and y 60 with radius 100 and 6 sides
var ngon = paper.ngon(50, 60, 100, 6);
Update an n-gon
// Updates the n-gon to have 5 edges
ngon.sett({ points: 5 });
// or
ngon.sett("points", 5);
Add a star
// Creates a star at x 200 and y 60 with inner radius 50, outer radius 100 and 9 points
var star = paper.star(200, 60, 50, 100, 9);
Update a star
// Updates the star to have 11 points, inner radius 40 and outer radius 120
star.sett({ points: 11, r1: 40, r2: 120 });
Retrieve the settings of a shape
var type = star.setts.type;
var points = star.setts.points;
var radius = star.setts.r;
...
- This plugin is still under development
- It requires the Prototype JS library
- writing tests
- testing with sets
- adding cross
- adding arrow
- animating with sett (morphing shapes)