2010-04-04 21:46:39 +01:00
|
|
|
function debug(str) {
|
|
|
|
cell = $('debug');
|
|
|
|
cell.innerHTML += str + "\n";
|
|
|
|
cell.scrollTop = cell.scrollHeight;
|
|
|
|
}
|
|
|
|
|
|
|
|
function dirObj(obj, parent, depth) {
|
|
|
|
var msg = "";
|
|
|
|
if (! depth) { depth=0; }
|
|
|
|
if (! parent) { parent= ""; }
|
|
|
|
|
|
|
|
// Print the properties of the passed-in object
|
|
|
|
for (var i in obj) {
|
|
|
|
if ((depth < 2) && (typeof obj[i] == "object")) {
|
|
|
|
// Recurse attributes that are objects
|
|
|
|
msg += dirObj(obj[i], parent + "." + i, depth+1);
|
|
|
|
} else {
|
|
|
|
msg += parent + "." + i + ": " + obj[i] + "\n";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return msg;
|
|
|
|
}
|
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
|
|
|
|
Canvas = {
|
|
|
|
|
|
|
|
c_x : 0,
|
|
|
|
c_y : 0,
|
|
|
|
c_wx : 0,
|
|
|
|
c_wy : 0,
|
|
|
|
|
|
|
|
mousedown: function (e) {
|
2010-04-04 21:46:39 +01:00
|
|
|
evt = e.event || window.event;
|
|
|
|
e.stop();
|
|
|
|
debug('mouse ' + evt.which + '/' + evt.button + ' down:' +
|
2010-04-04 22:08:55 +01:00
|
|
|
(evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
|
|
|
|
},
|
2010-04-04 21:46:39 +01:00
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
mouseUp: function (e) {
|
2010-04-04 21:46:39 +01:00
|
|
|
evt = e.event || window.event;
|
|
|
|
e.stop();
|
|
|
|
debug('mouse ' + evt.which + '/' + evt.button + ' up:' +
|
2010-04-04 22:08:55 +01:00
|
|
|
(evt.clientX - Canvas.c_x) + "," + (evt.clientY - Canvas.c_y));
|
|
|
|
},
|
2010-04-04 21:46:39 +01:00
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
keyDown: function (e) {
|
2010-04-04 21:46:39 +01:00
|
|
|
e.stop();
|
|
|
|
debug("keydown: " + e.key + "(" + e.code + ")");
|
2010-04-04 22:08:55 +01:00
|
|
|
},
|
2010-04-04 21:46:39 +01:00
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
keyUp : function (e) {
|
2010-04-04 21:46:39 +01:00
|
|
|
e.stop();
|
|
|
|
debug("keyup: " + e.key + "(" + e.code + ")");
|
2010-04-04 22:08:55 +01:00
|
|
|
},
|
2010-04-04 21:46:39 +01:00
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
ctxDisable: function (e) {
|
2010-04-04 21:46:39 +01:00
|
|
|
evt = e.event || window.event;
|
|
|
|
/* Stop propagation if inside canvas area */
|
2010-04-04 22:08:55 +01:00
|
|
|
if ((evt.clientX >= Canvas.c_x) && (evt.clientX < (Canvas.c_x + Canvas.c_wx)) &&
|
|
|
|
(evt.clientY >= Canvas.c_y) && (evt.clientY < (Canvas.c_y + Canvas.c_wy))) {
|
2010-04-04 21:46:39 +01:00
|
|
|
e.stop();
|
|
|
|
return false;
|
|
|
|
};
|
2010-04-04 22:08:55 +01:00
|
|
|
},
|
2010-04-04 21:46:39 +01:00
|
|
|
|
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
init: function (canvas) {
|
|
|
|
debug(">> init_canvas");
|
2010-04-04 21:46:39 +01:00
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
c = $(canvas);
|
|
|
|
c.addEvent('mousedown', Canvas.mouseDown);
|
|
|
|
c.addEvent('mouseup', Canvas.mouseUp);
|
|
|
|
document.addEvent('keydown', Canvas.keyDown);
|
|
|
|
document.addEvent('keyup', Canvas.keyUp);
|
2010-04-04 21:46:39 +01:00
|
|
|
|
|
|
|
/* Work around right and middle click browser behaviors */
|
2010-04-04 22:08:55 +01:00
|
|
|
document.addEvent('click', Canvas.ctxDisable);
|
|
|
|
document.body.addEvent('contextmenu', Canvas.ctxDisable);
|
2010-04-04 21:46:39 +01:00
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
Canvas.c_x = c.getPosition().x;
|
|
|
|
Canvas.c_y = c.getPosition().y;
|
|
|
|
Canvas.c_wx = c.getSize().x;
|
|
|
|
Canvas.c_wy = c.getSize().y;
|
2010-04-04 21:46:39 +01:00
|
|
|
|
|
|
|
if (! c.getContext) return;
|
|
|
|
var ctx = c.getContext('2d');
|
|
|
|
|
|
|
|
/* Border */
|
|
|
|
ctx.stroke();
|
2010-04-04 22:08:55 +01:00
|
|
|
ctx.rect(0, 0, Canvas.c_wx, Canvas.c_wy);
|
2010-04-04 21:46:39 +01:00
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
/*
|
|
|
|
// Does not work in firefox
|
|
|
|
var himg = new Image();
|
|
|
|
himg.src = "head_ani2.gif"
|
|
|
|
ctx.drawImage(himg, 10, 10);
|
|
|
|
*/
|
|
|
|
|
|
|
|
/* Test array image data */
|
2010-04-04 22:08:55 +01:00
|
|
|
var img = ctx.createImageData(50, 50);
|
2010-04-04 21:46:39 +01:00
|
|
|
for (y=0; y< 50; y++) {
|
|
|
|
for (x=0; x< 50; x++) {
|
|
|
|
img.data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y);
|
|
|
|
img.data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y);
|
|
|
|
img.data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x);
|
|
|
|
img.data[(y*50 + x)*4 + 3] = 255;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
ctx.putImageData(img, 100, 100);
|
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
debug("<< init_canvas");
|
2010-04-04 21:46:39 +01:00
|
|
|
}
|
|
|
|
|
2010-04-04 22:08:55 +01:00
|
|
|
};
|
|
|
|
|