var ggl = {
disObj:null,
hasTopImg:false,
topImg:null,
topColor:'#888888',
ctx:null,
mousedown:false,
callBack:null,
initBack:null,
handleEvent:function(e){
switch(e.type) {
case "mousedown":
case "touchstart":
this.mouseDownEvt(e);
break;
case "mousemove":
case "touchmove":
this.mouseMoveEvt(e);
break;
case "mouseup":
case "touchend":
this.mouseUpEvt(e);
break;
}
},
mouseDownEvt:function(e){
e.preventDefault();
this.mousedown=true;
},
mouseUpEvt:function(e){
e.preventDefault();
this.mousedown=false;
var data=this.ctx.getImageData(0,0,this.width,this.height).data;
for(var i=0,j=0;i<data.length;i+=4){
if(data[i] && data[i+1] && data[i+2] && data[i+3]){
j++;
}
}
if(j<=this.width*this.height*0.7){
if(this.callBack!=null) {
this.callBack();
}
}
},
mouseMoveEvt:function(e){
e.preventDefault();
if(this.mousedown) {
if(e.changedTouches){
e=e.changedTouches[e.changedTouches.length-1];
}
var local = this.getLocalCoords(this.disObj, e);
var x = local.x;
var y = local.y;
with(this.ctx) {
beginPath();
arc(x, y, 20, 0, Math.PI * 2);
fill();
}
}
},
getLocalCoords:function(elem, ev) {
var ox = 0, oy = 0;
var first;
var pageX, pageY;
while (elem != null) {
ox += elem.offsetLeft;
oy += elem.offsetTop;
elem = elem.offsetParent;
}
if (ev.hasOwnProperty('changedTouches')) {
first = ev.changedTouches[0];
pageX = first.pageX;
pageY = first.pageY;
} else {
pageX = ev.pageX;
pageY = ev.pageY;
}
return {'x': pageX - ox, 'y':pageY-oy};
},
setTop:function(){
if(this.hasTopImg) {
var pat=this.ctx.createPattern(this.topImg,"repeat");
this.ctx.fillStyle = pat;
} else {
this.ctx.fillStyle = this.topColor;
}
this.ctx.fillRect(0, 0, this.width, this.height);
},
init:function(o, w, h,c,pic,ifun,cbfun){
this.callBack = cbfun;
this.initBack = ifun;
this.width = w||320;
this.height = h||160;
var _this = this;
if(pic) {
this.hasTopImg = true;
this.topImg = new Image();
this.topImg.addEventListener('load', function(e) {
_this.toInit(o);
});
this.topImg.src = pic;
} else {
this.topColor = c||this.topColor;
this.hasTopImg = false;
this.toInit(o);
}
},
toInit:function(o) {
this.disObj = document.createElement('canvas');
this.disObj.style.backgroundColor='transparent';
this.disObj.style.position = 'absolute';
this.disObj.id = 'showRes';
this.disObj.width = this.width;
this.disObj.height = this.height;
this.ctx=this.disObj.getContext('2d');
this.ctx.fillStyle='transparent';
this.ctx.fillRect(0, 0, this.width, this.height);
this.setTop(this.ctx);
this.ctx.globalCompositeOperation = 'destination-out';
o.appendChild(this.disObj);
this.disObj.addEventListener('mousedown', this, false);
this.disObj.addEventListener('mousemove', this, false);
this.disObj.addEventListener('mouseup', this, false);
this.disObj.addEventListener('touchmove', this, false);
this.disObj.addEventListener('touchend', this, false);
this.disObj.addEventListener('touchstart', this, false);
if(this.initBack!=null) {
this.initBack();
}
}
}
ggl.init($('#gglCon').get(0), 300, 180, '', 'images/ggl.jpg',function(){
}, function(){
gglDone();
});
function gglDone() {
}