$(window).addEvent('load, function() {
CANVAS.init({ canvasElement : 'canvas', interactive : true });
var itemlayer = CANVAS.layers.add({ id : 'items' });
for(var j = 0; j < 5; j++)
{
for(var i = 0; i < 5; i++)
{
itemlayer.add({
id : 'item-'+i + '-' + j,
x : 51 * i,
y : 51 * j,
w : 50,
h : 50,
state : 'normal',
interactive : true, //although they have no interactive
events!
colors : { normal : '#f00', hover : '#00f' },
events : {
onDraw : function(ctx){
ctx.fillStyle = this.colors[this.state];
ctx.fillRect(this.x,this.y,this.w,this.h);
this.setDims(this.x,this.y,this.w,this.h);
}
}
});
}
}
$('canvas').addEvents({ //adding native dom events to <canvas> element
mousedown : function(e){
this.store('down',true);
},
mousemove : function(e){
if(this.retrieve('down',false)){
if( hoverItem = CANVAS.findTarget( CANVAS.getMouse(e) ) )
{
hoverItem.state = 'hover'; //set items state to hover
if it is hit
}
}
},
mouseup : function(e){
this.store('down',false);
CANVAS.layers.get('items').items.each(function(item){
item.state = 'normal'; //reset all items' state!
});
}
}).store('down',false); //flag wether mouse is down or not stored in
dom
CANVAS.addThread(new Thread({
id : 'myThread',
onExec : function(){
CANVAS.clear().draw();
}
}));
});
here is a jsfiddle implementation of the code... Any advice would be
very much appreciated! Thanks...
http://jsfiddle.net/WRRns/
