Permalink
Browse files

Added automatic event binding on adding of objects (thanks for the id…

…ea hunter9000).
  • Loading branch information...
1 parent 9dbd61e commit c5024a0eb46931365a4450a3b59d398dce1e36d8 @rsandor committed May 15, 2011
Showing with 67 additions and 79 deletions.
  1. +56 −0 demos/autoevent.html
  2. +0 −67 demos/jquery.html
  3. +11 −12 gury.js
View
@@ -0,0 +1,56 @@
+<!--
+ gury - A jQuery inspired canvas utility library
+ Another demo to show you how to use gury.
+ By Ryan Sandor Richards
+-->
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Automatic Event Binding Demo - By Ryan Sandor Richards</title>
+ </head>
+ <body style="font-family: helvetica; background-color: #444; color: #ddd; text-align: center">
+
+ <h1>Auto Event Binding Demo</h1>
+ <p>By Ryan Sandor Richards</p>
+
+ <!-- Create a canvas on the page -->
+ <canvas id="screen"></canvas>
+
+ <!-- Nice little link back to the repo -->
+ <p><a href="http://github.com/rsandor/gury" style="color: white">Project on github</a></p>
+
+ <!-- Add jQuery for load behaviors -->
+ <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
+
+ <!-- Include the gury library -->
+ <script type="text/javascript" charset="utf-8" src="../gury.js"></script>
+
+ <!-- Now script up a neato canvas scene! -->
+ <script type="text/javascript" charset="utf-8">$(function() {
+
+ $g('screen').size(100, 100).add({
+ theta: 0,
+ color: '#ada',
+ colors: {
+ '#ada': '#bc0',
+ '#bc0': '#aaf',
+ '#aaf': '#39a',
+ '#39a': '#ada'
+ },
+ draw: function(ctx) {
+ ctx.save();
+ ctx.translate(50, 50);
+ ctx.rotate(this.theta);
+ ctx.fillStyle = this.color;
+ ctx.fillRect(-32, -32, 64, 64);
+ ctx.restore();
+ this.theta += Math.PI / 120;
+ },
+ click: function(e) {
+ this.color = this.colors[this.color];
+ }
+ }).play(16);
+
+ });</script>
+ </body>
+</html>
View
@@ -1,67 +0,0 @@
-<!--
- gury - A jQuery inspired canvas utility library
- By Ryan Sandor Richards
--->
-<!DOCTYPE html>
-<html>
- <head>
- <title>jQuery - By Ryan Sandor Richards</title>
- <style type="text/css" media="screen">
- img { cursor: crosshair; }
- </style>
- </head>
- <body style="font-family: helvetica; background-color: #444; color: #ddd; text-align: center">
-
- <h1>jQuery</h1>
- <p>By Ryan Sandor Richards</p>
-
- <div id="content">
- <canvas></canvas>
- </div>
- <div id="controls"></div>
-
- <!-- Nice little link back to the repo -->
- <p><a href="http://github.com/rsandor/gury" style="color: white">Project on github</a></p>
-
- <!-- Add jQuery for load behaviors -->
- <script type="text/javascript" charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
-
- <!-- 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 desaturate(ctx, canvas) {
- var w = canvas.width, h = canvas.height;
- var imgData = ctx.getImageData(0, 0, w, h);
- var data = imgData.data;
- for (var x = 0; x < w; x++) {
- for (var y = 0; y < h; y++) {
- var pos = 4*w*y + 4*x;
- var r = data[pos], g = data[pos+1], b = data[pos+2];
- var hsv = rgbToHSV(r, g, b);
- hsv.s = 0;
- var rgb = hsvToRGB(hsv);
- data[pos] = rgb.r;
- data[pos+1] = rgb.g;
- data[pos+2] = rgb.b;
- }
- }
- ctx.putImageData(imgData, 0, 0);
- }
-
- $(function() {
- var img = new Image();
- img.src = "./images/mountains.jpg";
-
- $('canvas').gury().size(128, 128).add(function(ctx) {
- ctx.drawImage(img, 0, 0);
- }).play(32);
-
- });
- </script>
- </body>
-</html>
View
@@ -312,7 +312,7 @@ window.$g = window.Gury = (function(window, jQuery) {
* HitMap Module
* TODO Possibly expose showing and timing functionality in the future
*/
- var HitMap = window.hm = (function(show, time) {
+ var HitMap = (function(show, time) {
// Secondary hitmap canvas
var map = document.createElement('canvas');
var ctx = map.getContext('2d');
@@ -432,6 +432,7 @@ window.$g = window.Gury = (function(window, jQuery) {
var z = 0;
this.nextZ = function() { return z++; };
}
+
Gury.prototype = {
register: function (canvas) {
if (isCanvas(canvas)) {
@@ -523,6 +524,15 @@ window.$g = window.Gury = (function(window, jQuery) {
// Add to the rendering list
this._objects.add(object);
+ // Automatic event binding for the object
+ var events = ['click', 'mousedown', 'mouseup', 'mousemove', 'mouseenter', 'mouseleave'];
+ for (var e in events) {
+ var eventName = events[e];
+ if (isDefined(object[eventName]) && isFunction(object[eventName])) {
+ this.bind(object, eventName, object[eventName]);
+ }
+ }
+
return this;
},
@@ -943,17 +953,6 @@ window.$g = window.Gury = (function(window, jQuery) {
return GuryInterface;
})(window, window.jQuery);
-/*
- * jQuery plugin integration
- *
-(function($) {
- if (typeof $ == "undefined" || $ == null) { return; }
- $.fn.gury = function(options) {
- return $g(this, options);
- };
-})(window.jQuery);
-*/
-
/* "There's a star man waiting in the sky. He'd like to come and meet us but
he think's he'll blow our minds." */
/* We'll miss you Mandelbrot */

0 comments on commit c5024a0

Please sign in to comment.