Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

An extension to Raphael JS providing more shapes

branch: master

Updated README

latest commit 40a1af5c09
Wout wout authored
lib 0.0.1
src 0.0.2
README.markdown Updated README
demo.html 0.0.2
raphael.shapes.js 0.0.2
README.markdown

Important!

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.

Raphaël Shapes plugin - 0.0.2

What is it?

An extension to the Raphael Vector Library.
Currently it provides the following shapes:

  • polygon (throw in raw SVG polygon string)
  • n-gon
  • star

Usage

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

Dependencies

Important

  • This plugin is still under development
  • It requires the Prototype JS library

To-do

  • writing tests
  • testing with sets
  • adding cross
  • adding arrow
  • animating with sett (morphing shapes)
Something went wrong with that request. Please try again.