Permalink
Browse files

Made the event demo much more schnazzy.

  • Loading branch information...
rsandor committed Oct 16, 2010
1 parent 0196845 commit 4a9fc70102d9b42b130d937ff179425fe7204e2b
Showing with 102 additions and 31 deletions.
  1. +12 −29 demos/events.html
  2. +89 −0 demos/shared.js
  3. +1 −2 gury.js
View
@@ -45,37 +45,19 @@ <h1>events</h1>
<!-- Include the gury library -->
<script type="text/javascript" charset="utf-8" src="../gury.js"></script>
+ <!-- Include some shared helper classes -->
+ <script type="text/javascript" charset="utf-8" src="shared.js"></script>
+
+
<!-- Now script up a neato canvas scene! -->
<script type="text/javascript" charset="utf-8">
$(function() {
- var target = window.t = {
- color: 'red',
- x: 40, y:40, size: 120,
- draw: function(ctx) {
- ctx.fillStyle = this.color;
- x = this.x;
- y = this.y;
- size = this.size;
- ctx.fillRect(x, y, size, size);
- }
- };
-
- var target2 = window.t2 = {
- color: 'gray',
- x: 60, y:60, size: 80,
- draw: function(ctx) {
- ctx.fillStyle = this.color;
- x = this.x;
- y = this.y;
- size = this.size;
- ctx.fillRect(x, y, size, size);
- }
- };
-
- var timeout = null;
-
+ var timeout = null;
function handler(name) {
return function() {
+ if (name.match(/mouse(enter|leave)/)) {
+ this.toggleHover();
+ }
$('#'+name).addClass('active');
function trigger() {
@@ -92,9 +74,10 @@ <h1>events</h1>
};
}
- gury = $g().size(200, 200).background('black')
- .add('target', target)
- .add('target', target2)
+ gury = $g().size(200, 200)
+ .add('target', new Box(100, 100, 110, {color: '#363', theta: Math.PI / 4}))
+ .add('target', new Box(100, 100, 100, {color: '#696'}))
+ .add('target', new Circle(50, 50, 30, {color: '#363'}))
.click('target', handler('click'))
.mousedown('target', handler('mousedown'))
.mouseup('target', handler('mouseup'))
View
@@ -0,0 +1,89 @@
+/*
+ * gury - A jQuery inspired canvas utility library
+ * By Ryan Sandor Richards
+ *
+ * shared.js
+ * Some nice shared classes for use with the demos.
+ */
+
+/*
+ * Shape Base Class
+ */
+function Shape(x, y, s, options) {
+ var defaultOptions = {
+ color: '#a00',
+ highlight: '#cfc',
+ theta: 0,
+ dx: 0,
+ dy: 0,
+ dTheta: 0
+ };
+
+ this.x = x || 0;
+ this.y = y || 0;
+ this.size = s || 32;
+
+ options = options || {};
+ for (var k in defaultOptions) {
+ if (options[k]) {
+ this[k] = options[k];
+ }
+ else {
+ this[k] = defaultOptions[k];
+ }
+ }
+}
+
+Shape.prototype = {
+ // Actual drawing method DO NOT OVERRIDE
+ draw: function(ctx, canvas) {
+ ctx.save();
+ ctx.translate(this.x, this.y);
+ ctx.rotate(this.theta);
+ ctx.fillStyle = this.color;
+ this.render(ctx, canvas);
+ ctx.restore();
+ },
+
+
+ // Put shape specific code here...
+ render: function(ctx, canvas) {},
+
+ update: function() {
+ this.x += this.dx;
+ this.y += this.dy;
+ this.theta += this.dTheta;
+ },
+
+ toggleHover: function() {
+ var c = this.color;
+ this.color = this.highlight;
+ this.highlight = c;
+ }
+};
+
+/*
+ * For drawing squares
+ */
+function Box() {
+ Shape.apply(this, arguments);
+ this.render = function(ctx, canvas) {
+ var s = this.size;
+ var s2 = s / 2;
+ ctx.fillRect(-s2, -s2, s, s);
+ };
+}
+Box.prototype = new Shape();
+
+/*
+ * For drawing circles
+ */
+function Circle() {
+ Shape.apply(this, arguments);
+ this.render = function(ctx, canvas) {
+ ctx.beginPath();
+ ctx.arc(this.x, this.y, this.size, 0, 2*Math.PI, true);
+ ctx.fill();
+ };
+}
+Circle.prototype = new Shape();
View
@@ -475,7 +475,6 @@ window.$g = window.Gury = (function(window, jQuery) {
// Annotate the object with gury specific members
if (!isDefined(object._gury)) {
- console.log('ADDED ANNOTATIONS');
object._gury = { visible: true, paused: false, z: this.nextZ() };
}
@@ -627,7 +626,7 @@ window.$g = window.Gury = (function(window, jQuery) {
};
/*
- * Object Events
+ * Gury Events
* TODO Document event system fully
*/
var Events = (function() {

0 comments on commit 4a9fc70

Please sign in to comment.