Skip to content

Instantly share code, notes, and snippets.

@exactlyaaron

exactlyaaron/raphaelintro.md

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save exactlyaaron/c1bef5c3e24436602ee1 to your computer and use it in GitHub Desktop.
Save exactlyaaron/c1bef5c3e24436602ee1 to your computer and use it in GitHub Desktop.
Download ZIP
Short introduction to the RaphaelJS Javascript library
Raw
raphaelintro.md

RaphaelJS - Rails

Raphaël is a JavaScript library for drawing on web pages. Basically one draw shapes of different types, likes circles, text, rectangles, images.

How to use it (manually):

  1. Download "raphael.min.js" from http://raphaeljs.com/ to your app/assets/javascript directory

or get the unminifed version here https://raw.githubusercontent.com/DmitryBaranovskiy/raphael/master/raphael.js

  1. Include the JS file in the head of your documents <script type="text/javascript" src="raphael-min.js"></script>

  2. Objects are drawn on paper elements created by calling the Raphael(...) function.

Example: var paper = Raphael("paper1", 500,500); This creates a 500 x 500 "paper" within an HTML element with an ID of "paper".

  1. Paths and shapes are drawn within that paper. Here is an example of a simple rectangle. var rect1 = paper.rect(20,30,100,12).attr({fill: "orange"}); There are many available functions supported by SVG to create shapes and draw anything. A detailed list can be found at http://www.w3.org/TR/SVG/paths.html

Links/Resources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment