Permalink
Browse files

0.0.1

provided documentation
  • Loading branch information...
1 parent a0fd11f commit 904baeafc09af227aa2590ba1b31488045fde25e wout fierens committed Dec 5, 2009
Showing with 5,097 additions and 0 deletions.
  1. +49 −0 README.markdown
  2. +38 −0 demo.html
  3. +26 −0 lib/onresize.js
  4. +4,874 −0 lib/prototype.js
  5. +7 −0 lib/raphael-min.js
  6. +63 −0 raphael.shapes.js
  7. +40 −0 src/demo.js
View
@@ -0,0 +1,49 @@
+# Raphaël Shapes plugin - 0.0.1
+
+### What is it?
+An extension to the Raphael Vector Library.<br/>
+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 hexagon
+
+ // Creates a n-gon with radius 100 and 6 sides at 50, 60
+ var ngon = paper.ngon(50, 60, 100, 6)
+
+Update a n-gon
+
+ // Updates the n-gon to have 5 edges
+ ngon.attr("path", paper.ngon_path(100, g))
+
+Add a star
+
+ // Creates a star with inner radius 40, outer radius 100 and 9 points at 200, 60
+ var star = paper.star(200, 60, 50, 100, 9)
+
+Update a star
+
+ // Updates the star to have 11 points
+ star.attr("path", paper.star_path(50, 100, 11))
+
+### Dependencies
+- [Raphael JS](http://raphaeljs.com/)
+- [Prototype JS](http://prototypejs.org/)
+
+### Important
+- This plugin is still under development
+- It requires the Prototype JS library
+
+### To-do
+- writing tests
+- testing with sets
+- adding cross
+- adding arrow
View
@@ -0,0 +1,38 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+ <title>Raphael Shapes - Interactive demo</title>
+ <style type="text/css" media="screen">
+ body, html {
+ margin: 0;
+ padding: 0;
+ background-color: #fff;
+ height: 100%;
+ }
+ #paper {
+ width:100%;
+ height: 100%;
+ }
+ #buttons {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ }
+ </style>
+ </head>
+
+ <body>
+ <div id="paper"></div>
+ <div id="buttons">
+ <input type="button" name="ngon" value="Create n-gon" class="button" onclick="Demo.addShape('ngon')" />
+ <input type="button" name="star" value="Create star" class="button" onclick="Demo.addShape('star')" />
+ </div>
+ </body>
+ <script src="lib/prototype.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/onresize.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/raphael-min.js" type="text/javascript" charset="utf-8"></script>
+ <script src="raphael.shapes.js" type="text/javascript" charset="utf-8"></script>
+ <script src="src/demo.js" type="text/javascript" charset="utf-8"></script>
+</html>
View
@@ -0,0 +1,26 @@
+/*
+ * onResize 0.0.1 - Extension to Prototype JS
+ *
+ * Copyright (c) 2009 Wout Fierens
+ * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
+ */
+
+Object.extend(window, {
+ fire: Element.Methods.fire.methodize(),
+ observe: Element.Methods.observe.methodize(),
+ stopObserving: Element.Methods.stopObserving.methodize()
+});
+
+(document.onresize ? document : window).observe("resize", function() {
+ if (!document.viewport.is_resized) {
+ document.viewport.is_resized = true;
+ window.fire("resize:start");
+ var resizeEnd;
+ resizeEnd = (function() {
+ document.viewport.is_resized = false;
+ window.fire("resize:end");
+ Event.stopObserving(document, "mousemove", resizeEnd);
+ }).bind(this);
+ document.observe("mousemove", resizeEnd);
+ }
+});
Oops, something went wrong.

0 comments on commit 904baea

Please sign in to comment.