Permalink
Browse files

0.0.2

- enter the "sett" method (like the attr method but for shapes)
- element type and other settings are saved as an object in "shape.setts"
  • Loading branch information...
1 parent 12b5c20 commit 9a6f66c8a21f11f7341a016efb7cb4676a0ad4da wout fierens committed Dec 6, 2009
Showing with 88 additions and 32 deletions.
  1. +28 −8 README.markdown
  2. +1 −0 demo.html
  3. +49 −22 raphael.shapes.js
  4. +10 −2 src/demo.js
View
36 README.markdown
@@ -14,25 +14,44 @@ 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 with radius 100 and 6 sides at 50, 60
- var ngon = paper.ngon(50, 60, 100, 6)
+ // 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.attr("path", paper.ngon_path(100, 5))
+ ngon.sett({ points: 5 });
+
+ // or
+ ngon.sett("points", 5);
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)
+ // 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
- star.attr("path", paper.star_path(50, 100, 11))
+ // Updates the star to have 11 points, inner radius 40 and outer radius 120
+ star.sett({ points: 11, r1: 40, r2: 120 });
+
+Get the shape type of an existing element
+
+ var type = star.setts.type;
### Dependencies
- [Raphael JS](http://raphaeljs.com/)
@@ -46,4 +65,5 @@ Update a star
- writing tests
- testing with sets
- adding cross
-- adding arrow
+- adding arrow
+- animating with sett (morphing shapes)
View
1 demo.html
@@ -28,6 +28,7 @@
<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')" />
+ <input type="button" name="polygon" value="Create polygon" class="button" onclick="Demo.addShape('polygon')" />
</div>
</body>
<script src="lib/prototype.js" type="text/javascript" charset="utf-8"></script>
View
71 raphael.shapes.js
@@ -1,37 +1,50 @@
/*
- * raphael.shapes 0.0.1
+ * raphael.shapes 0.0.2
*
* Copyright (c) 2009 Wout Fierens
* Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
*/
-// extending raphael with a polygon function (used with raw SVG polygon data)
-Raphael.fn.polygon = function(point_string) {
- var poly_array = ["M"];
- $w(point_string).each(function(point, i) {
- point.split(",").each(function(c) {
- poly_array.push(parseFloat(c));
- });
- if (i == 0) poly_array.push("L");
- });
- poly_array.push("Z");
- return this.path(poly_array.compact());
+// extending raphael with a polygon function (to be used with raw SVG polygon data)
+Raphael.fn.polygon = function(cx, cy, points) {
+ return this.path()
+ .sett({ type: "polygon", points: points })
+ .translate(cx, cy);
};
// adding a n-gon element
-Raphael.fn.ngon = function(cx, cy, r, n) {
- return this.path(this.ngon_path(r, n)).translate(cx, cy);
+Raphael.fn.ngon = function(cx, cy, r, points) {
+ return this.path()
+ .sett({ type: "ngon", r: r, points: points })
+ .translate(cx, cy);
+}
+
+// adding a star element
+Raphael.fn.star = function(cx, cy, r1, r2, points) {
+ return this.path()
+ .sett({ type: "star", r1: r1, r2: r2, points: points })
+ .translate(cx, cy);
}
// adding a star element
-Raphael.fn.star = function(cx, cy, r1, r2, n) {
- return this.path(this.star_path(r1, r2, n)).translate(cx, cy);
+Raphael.el.sett = function() {
+ var setts = {};
+ if (typeof arguments[0] == "string") {
+ setts[arguments[0]] = arguments[1];
+ } else if (arguments[0]) {
+ setts = arguments[0];
+ }
+ this.setts = $H(this.setts).merge(setts).toObject();
+ return this.attr("path", this[this.setts.type]());
}
// n-gon path function
-Raphael.fn.ngon_path = function(r, n) {
- var points = [], part = 360 / n;
+Raphael.el.ngon = function() {
+ var points = [],
+ n = this.setts.points,
+ r = this.setts.r,
+ part = 360 / n;
(n).times(function(i) {
var a = i * part - 90,
x = r * Math.cos(a * Math.PI / 180),
@@ -43,8 +56,12 @@ Raphael.fn.ngon_path = function(r, n) {
}
// star path function
-Raphael.fn.star_path = function(r1, r2, n) {
- var points = [], part = 360 / n;
+Raphael.el.star = function() {
+ var points = [],
+ n = this.setts.points,
+ r1 = this.setts.r1,
+ r2 = this.setts.r2,
+ part = 360 / n;
(n).times(function(i) {
var a = i * part + 90,
x = r1 * Math.cos(a * Math.PI / 180),
@@ -59,5 +76,15 @@ Raphael.fn.star_path = function(r1, r2, n) {
return points.join(" ");
}
-
-
+// polygon function
+Raphael.el.polygon = function() {
+ var poly_array = ["M"];
+ $w(this.setts.points).each(function(point, i) {
+ point.split(",").each(function(c) {
+ poly_array.push(parseFloat(c));
+ });
+ if (i == 0) poly_array.push("L");
+ });
+ poly_array.push("Z");
+ return poly_array.compact();
+}
View
12 src/demo.js
@@ -22,15 +22,23 @@ var ShapesDemo = Class.create({
y = (dim.height - r) * Math.random(),
n = 3 + Math.round(11 * Math.random())
shape = this.paper.ngon(x, y, r, n);
- shape.attr({ fill: "#f03" })
+ shape.attr({ fill: "#f03" });
break;
case "star":
var r = 20 + 80 * Math.random(),
x = (dim.width - r) * Math.random(),
y = (dim.height - r) * Math.random(),
n = 3 + Math.round(11 * Math.random())
shape = this.paper.star(x, y, r, r / 2, n);
- shape.attr({ fill: "#79DE00" })
+ shape.attr({ fill: "#79DE00" });
+ break;
+ case "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 69.127,21.084 97.674,17.421 59.075,26.648 29.338,45.24",
+ x = (dim.width) * Math.random(),
+ y = (dim.height) * Math.random(),
+ s = 3 * Math.random()
+ shape = this.paper.polygon(x, y, raw_poly);
+ shape.attr({ fill: "#00C7DC" }).scale(s, s).rotate(360 * Math.random());
break;
}
shape.attr({ opacity: 0.5, "stroke-width": 3, stroke: "#333" })

0 comments on commit 9a6f66c

Please sign in to comment.