JCanvas库开发接口

/**
 * @author 智圆行方
 */

/**
 * DisplayObject 类
 * 可视对象（抽象）
 * 所有的可视对象均继承于此类
 * 定义了所有可视对象最基本得五项属性
 */
function DisplayObject() {
	this.x=0;//横坐标
	this.y=0;//纵坐标
	this.width=0;//宽度
	this.height=0;//高度
	this.stage=null;//对应的舞台对象（舞台对象对应的舞台对象为null）
};

/**
 * InteractiveObject 类
 * 交互对象（抽象）
 * 所有用来与用户交互的对象均继承于此类
 * 定义了相关的事件操作方法、属性
 */
function InteractiveObject() {
	DisplayObject.call(this);//继承
	this.eventListner=new Object();//事件侦听器列表
};

InteractiveObject.prototype.addEventListner= function(type,func) {//添加事件侦听器（同一类型的事件可有多个侦听器）
	if(this.eventListner[type]==null || this.eventListner[type]==undefined) {//如果为空或未定义
	this.eventListner[type]=new Array();//定义为数组对象
	}
	this.eventListner[type].push(func);//添加一个事件侦听器到该类型
};
InteractiveObject.prototype.removeEventListner= function(type,func) {//移除事件侦听器（同一类型事件的某一侦听器）
	if(this.eventListner[type]==null || this.eventListner[type]==undefined) {//如果本来就没有
	return;//返回
	}
	for (var i=0; i < this.eventListner[type].length; i++) {//有，就循环
	if(this.eventListner[type][i]==func) {//判断一下，哪一个是指定的侦听器函数
	delete this.eventListner[type][i];//删除它
	this.eventListner[type].splice(i,1);//在数组中移除他
	}
	};
	if(this.eventListner[type].length==0) {//如果该类型已经没有侦听器
	delete this.eventListner[type];//清除该类型的侦听器对象
	}
};
InteractiveObject.prototype.removeAllEventListner= function(type) {//移除某类型事件的所有侦听器
	if(this.eventListner[type]==null || this.eventListner[type]==undefined) {//本来为空，不理他
	return;
	}
	this.eventListner[type].splice();//移除
	delete this.eventListner[type];//删除
};
InteractiveObject.prototype.hasEventListner= function(type) {//是否有事件侦听器
	return (this.eventListner[type]!=null && this.eventListner[type]!=undefined && this.eventListner[type].length>0);
};

/**
 * DisplayObjectContainer 类
 * 可视对象容器（具体）
 * 所有可以拥有子可视对象的对象均继承于此类
 * 定义了操作子可视对象的属性、方法
 */
function DisplayObjectContainer(ctx) {
	InteractiveObject.call(this);//继承
	this.ctx=ctx;//具体类将涉及到canvas的上下文context，需要提供该参数并记录到属性中
	this.childs=new Array();//子对象数组
	this.maxWidth=0;//根据子对象宽高记录最大宽高
	this.maxHeight=0;
	this.moveChild=new Array();//当前鼠标悬停子成员数组（由于对象重叠关系，悬停子成员并非一个，所以用数组）。此属性在处理事件时起作用。
};

DisplayObjectContainer.prototype=new InteractiveObject();//继承交互对象的原型
DisplayObjectContainer.prototype.getContext= function() {//取上下文，完全可以直接操作属性
	return this.ctx;
};
DisplayObjectContainer.prototype.addChild= function(child) {//添加子对象
	if(this.maxWidth<child.x+child.width) {
	this.maxWidth=child.x+child.width;//自动处理最大宽高
	}
	if(this.maxHeight<child.y+child.height) {
	this.maxHegiht=child.y+child.height;
	}
	this.childs.push(child);//加入
	child.stage=this;//子对象的舞台stage属性自动赋值
};
DisplayObjectContainer.prototype.addChildAt= function(child,index) {//按照索引添加子对象
	if(this.maxWidth<child.x+child.width) {
	this.maxWidth=child.x+child.width;//自动处理最大宽高
	}
	if(this.maxHeight<child.y+child.height) {
	this.maxHegiht=child.y+child.height;
	}
	this.childs.splice(index,0,child);//在index索引处插入子对象
	child.stage=this;//子对象的舞台stage属性自动赋值
};
DisplayObjectContainer.prototype.removeChild= function(child) {//移除子对象
	this.childs.splice(this.getChildIndex(child),1);//移除
	if(this.maxWidth==child.x+child.width) {//处理最大宽高
	this.maxWidth=0;
	for (var i=0; i < this.childs.length; i++) {
	if(this.childs[i].x+this.childs[i].width>this.maxWidth) {
	this.maxWidth=this.childs[i].x+this.childs[i].width;
	}
	};
	}
	if(this.maxHeight==child.y+child.height) {
	this.maxHeight=0;
	for (var i=0; i < this.childs.length; i++) {
	if(this.childs[i].y+this.childs[i].height>this.maxHeight) {
	this.maxHeight=this.childs[i].y+this.childs[i].height;
	}
	};
	}
	child.stage=null;//已移除，故子对象舞台stage为空
};
DisplayObjectContainer.prototype.removeChildAt= function(index) {//根据索引移除子对象
	this.childs[index].stage=null;//已移除，故子对象舞台stage为空
	this.childs.splice(index,1);//移除
	if(this.maxWidth==child.x+child.width) {//处理最大宽高
	this.maxWidth=0;
	for (var i=0; i < this.childs.length; i++) {
	if(this.childs[i].x+this.childs[i].width>this.maxWidth) {
	this.maxWidth=this.childs[i].x+this.childs[i].width;
	}
	};
	}
	if(this.maxHeight==child.y+child.height) {
	this.maxHeight=0;
	for (var i=0; i < this.childs.length; i++) {
	if(this.childs[i].y+this.childs[i].height>this.maxHeight) {
	this.maxHeight=this.childs[i].y+this.childs[i].height;
	}
	};
	}
};
DisplayObjectContainer.prototype.getChildAt= function(index) {//根据索引取出子对象
	return this.childs[index];
};
DisplayObjectContainer.prototype.contains= function(child) {//判断某对象是否为该stage舞台的子对象
	return (this.getChildIndex(child)!=-1);
};
DisplayObjectContainer.prototype.getChildIndex= function(child) {//根据子对象取出索引
	for (var i=0; i < this.childs.length; i++) {
	if(this.childs[i]==child) {
	return i;
	}
	};
	return -1;
};
DisplayObjectContainer.prototype.setChildIndex= function(child,index) {//重设子对象索引（未测试）
	this.removeChild(child);
	this.addChildAt(child,index);
};
DisplayObjectContainer.prototype.swapChildren= function(child1,child2) {//交换子对象索引（未测试）
	this.setChildIndex(child1,this.getChildIndex(child2));
	this.setChildIndex(child2,this.getChildIndex(child1));
};
DisplayObjectContainer.prototype.dispatchMouseEvent= function(type,x,y) {//调度鼠标事件
	var mouseX=x;
	var mouseY=y;
	var newMoveChild=new Array();//当前鼠标悬浮子对象数组
	for (var i=0; i < this.childs.length; i++) {
	if(this.childs[i].dispatchMouseEvent!=null && this.childs[i].dispatchMouseEvent!=undefined) {
	this.childs[i].dispatchMouseEvent(type,mouseX-this.childs[i].x,mouseY-this.childs[i].y);//如果子对象仍有调度函数，也需调用
	}
	//↓ 与子对象相交
	if(mouseX>this.childs[i].x && mouseX<this.childs[i].x+this.childs[i].width && mouseY>this.childs[i].y && mouseY<this.childs[i].y+this.childs[i].height) {
	if(type=="onmousemove" ) {
	newMoveChild.push(this.childs[i]);//如果是鼠标移动事件，记录悬浮对象
	}
	if(this.childs[i].eventListner[type]==null || this.childs[i].eventListner[type]==undefined) {
	continue;//如果子对象没有相应事件侦听器，跳过
	}
	for (var j=0; j < this.childs[i].eventListner[type].length; j++) {
	this.childs[i].eventListner[type][j](mouseX-this.childs[i].x,mouseY-this.childs[i].y);//否则循环执行一遍侦听器
	}
	}
	};
	if(type!="onmousemove") {
	return;//如果不是鼠标移动事件，就无事了
	}
	for (var j=0; j < this.moveChild.length; j++) {//循环寻找 原先悬浮子对象中有，新悬浮子对象中没有的
	var has=false;
	for (var i=0; i < newMoveChild.length; i++) {
	if(this.moveChild[j]==newMoveChild[i]) {
	has=true;
	}
	};
	if(has==false) {//没有了
	if(this.moveChild[j].eventListner["onmouseout"]) {//即鼠标移出了它，为他处理onmouseout事件
	for (var i=0; i < this.moveChild[j].eventListner["onmouseout"].length; i++) {
	this.moveChild[j].eventListner["onmouseout"][i](mouseX-this.moveChild[j].x,mouseY-this.moveChild[j].y);
	}
	}
	delete this.moveChild[j];
	this.moveChild[j]=undefined;
	}
	};
	for (var i=0; i < newMoveChild.length; i++) {//循环寻找 新悬浮子对象中有，原悬浮子对象中没有的
	var has=false;
	for (var j=0; j < this.moveChild.length; j++) {
	if(this.moveChild[j]==newMoveChild[i]) {
	has=true;
	}
	};
	if(has==false) {//没有的
	this.moveChild.push(newMoveChild[i]);//即新被鼠标碰撞的，处理onmouseover事件
	if(newMoveChild[i].eventListner["onmouseover"]) {
	for (var j=0; j < newMoveChild[i].eventListner["onmouseover"].length; j++) {
	newMoveChild[i].eventListner["onmouseover"][j](mouseX-newMoveChild[i].x,mouseY-newMoveChild[i].y);
	}
	}
	}
	};
	this.cleanUpMoveChild();//清理悬浮对象数组
};
DisplayObjectContainer.prototype.cleanUpMoveChild= function() {
	var tempArr=new Array();//临时数组
	for(var i=0;i<this.moveChild.length;i++) {
	if(this.moveChild[i]!=null && this.moveChild[i]!=undefined) {//如果悬浮对象数组中当前元素非空非未定义
	tempArr.push(this.moveChild[i]);//加入到临时数组
	}
	}
	this.moveChild=tempArr;//临时数组赋值给悬浮对象数组
}

/**
 * Stage 类
 * 舞台（具体）
 * 任何一个Canvas只能对应且必须对应一个舞台对象。此类无子类。
 * 此类定义了对Canvas的封装的功能
 */
function Stage(canvas) {//传递一个canvas对象
	this.canvas=canvas;//记录canvas对象
	this.hasStart=false;//是否已经启动
	DisplayObjectContainer.call(this,this.canvas.getContext("2d"));//继承于可视对象容器类
	this.Interval=null;//时钟
	this.stage=null;//舞台的stage变量为null（前面说过）
	this.width=this.canvas.width;//宽高即canvas宽高
	this.height=this.canvas.height;
	//下面开始挂接事件
	//鼠标事件
	this.canvas.onmousemove= function(param) {
	return function(event) {//首先进行stage本身的事件处理
	if(param.eventListner["onmousemove"]!=null && param.eventListner["onmousemove"]!=undefined) {
	for (var i=0; i < param.eventListner["onmousemove"].length; i++) {
	param.eventListner["onmousemove"][i](event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	}
	}
	//然后调度鼠标事件到各个子对象
	param.dispatchMouseEvent("onmousemove",event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	};
	}(this);
	this.canvas.onclick= function(param) {
	return function(event) {//同理
	if(param.eventListner["onclick"]!=null && param.eventListner["onclick"]!=undefined) {
	for (var i=0; i < param.eventListner["onclick"].length; i++) {
	param.eventListner["onclick"][i](event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	}
	}
	param.dispatchMouseEvent("onclick",event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	};
	}(this);
	this.canvas.onmousedown= function(param) {
	return function(event) {
	if(param.eventListner["onmousedown"]!=null && param.eventListner["onmousedown"]!=undefined) {
	for (var i=0; i < param.eventListner["onmousedown"].length; i++) {
	param.eventListner["onmousedown"][i](event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	}
	}
	param.dispatchMouseEvent("onmousedown",event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	};
	}(this);
	this.canvas.onmouseup= function(param) {
	return function(event) {
	event.clientX-=param.canvas.offsetLeft;
	event.clientY-=param.canvas.offsetTop;
	if(param.eventListner["onmouseup"]!=null && param.eventListner["onmouseup"]!=undefined) {
	for (var i=0; i < param.eventListner["onmouseup"].length; i++) {
	param.eventListner["onmouseup"][i](event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	}
	}
	param.dispatchMouseEvent("onmouseup",event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	};
	}(this);
	this.canvas.onmouseover= function(param) {
	return function(event) {
	if(param.eventListner["onmouseover"]!=null && param.eventListner["onmouseover"]!=undefined) {
	for (var i=0; i < param.eventListner["onmouseover"].length; i++) {
	param.eventListner["onmouseover"][i](event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	}
	}
	param.dispatchMouseEvent("onmouseover",event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	};
	}(this);
	this.canvas.onmouseout= function(param) {
	return function(event) {
	if(param.eventListner["onmouseout"]!=null && param.eventListner["onmouseout"]!=undefined) {
	for (var i=0; i < param.eventListner["onmouseout"].length; i++) {
	param.eventListner["onmouseout"][i](event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	}
	}
	param.dispatchMouseEvent("onmouseout",event.clientX-param.canvas.offsetLeft,event.clientY-param.canvas.offsetTop);
	};
	}(this);
	//键盘事件，只有stage的事情
	document.onkeydown= function(param) {
	return function(event) {
	if(param.eventListner["onkeydown"]!=null && param.eventListner["onkeydown"]!=undefined) {
	for (var i=0; i < param.eventListner["onkeydown"].length; i++) {
	param.eventListner["onkeydown"][i](event);
	}
	}
	};
	}(this);
	document.onkeyup= function(param) {
	return function(event) {
	if(param.eventListner["onkeyup"]!=null && param.eventListner["onkeyup"]!=undefined) {
	for (var i=0; i < param.eventListner["onkeyup"].length; i++) {
	param.eventListner["onkeyup"][i](event);
	}
	}
	};
	}(this);
	document.onkeypress= function(param) {
	return function(event) {
	if(param.eventListner["onkeypress"]!=null && param.eventListner["onkeypress"]!=undefined) {
	for (var i=0; i < param.eventListner["onkeypress"].length; i++) {
	param.eventListner["onkeypress"][i](event);
	}
	}
	};
	}(this);
	this.draw= function() {//舞台自身的绘制函数
	};
	this.onEnterFrame= function() {//单独的舞台的刷新帧事件处理
	};
};

Stage.prototype=new DisplayObjectContainer();//继承
Stage.prototype.render= function() {//舞台的渲染函数（所有可视对象都应该有一个render函数）
	this.ctx.clearRect(0,0,this.width,this.height);//清空canvas
	this.draw();//画自己
	for (var i=0; i < this.childs.length; i++) {//循环绘制子对象
	this.ctx.translate(this.childs[i].x,this.childs[i].y);//根据子对象坐标，平移坐标系
	this.childs[i].render();
	this.ctx.translate(-this.childs[i].x,-this.childs[i].y);//再回来
	};
};
Stage.prototype.start= function() {//开始
	this.hasStart=true;
	this.Interval=setInterval((function(param) {
	return function() {
	param.render();
	param.onEnterFrame();
	}
	})(this),10);
};
Stage.prototype.stop= function() {//停止
	this.hasStart=false;
	clearInterval(this.Interval);
}

/**
 * Sprite 类
 * 精灵（具体）
 * 拥有一些对图形的操作方法（如拖放）
 */
function Sprite(ctx) {
	DisplayObjectContainer.call(this,ctx);//继承
	this.isDragging=false;//是否正在拖放
	this.dragX=null;//拖放时需要临时使用的坐标变量
	this.dragY=null;
	this.dragFunc=null;//拖放事件处理函数的记录，以便移除
	this.stopDragFunc=null;//停止拖放事件处理函数，以便移除
	this.draw= function() {//本身的绘制函数
	};
};

Sprite.prototype=new DisplayObjectContainer();//继承
Sprite.prototype.render= function() {//必有的渲染函数
	this.draw();//画自己
	//根据子对象最大宽高决定缩放程度
	this.ctx.scale(this.width<this.maxWidth?this.width/this.maxWidth:1,this.height<this.maxHeight?this.height/this.maxHeight:1);
	for (var i=0; i < this.childs.length; i++) {//循环绘制子对象
	this.ctx.translate(this.childs[i].x,this.childs[i].y);
	this.childs[i].render();
	this.ctx.translate(-this.childs[i].x,-this.childs[i].y);
	};
	this.ctx.scale(this.width<this.maxWidth?this.maxWidth/this.width:1,this.height<this.maxHeight?this.maxHeight/this.height:1);
};
Sprite.prototype.startDrag= function (startX,startY) {//开始拖放
	this.isDragging=true;
	this.dragX=startX+this.x;
	this.dragY=startY+this.y;
	this.dragFunc= function(param) {
	return function(x,y) {
	var offsetX=x-param.dragX;
	var offsetY=y-param.dragY;
	param.x+=offsetX;
	param.y+=offsetY;
	param.dragX=x;
	param.dragY=y;
	};
	}(this);
	this.stopDragFunc= function(param) {
	return function(x,y) {
	param.stopDrag();
	};
	}(this);
	this.stage.addEventListner("onmousemove",this.dragFunc);
	this.stage.addEventListner("onmouseout",this.stopDragFunc);
};
Sprite.prototype.stopDrag= function() {//停止拖放
	this.isDragging=false;
	this.dragY=this.dragX=null;
	this.stage.removeEventListner("onmousemove",this.dragFunc);
	delete this.dragFunc;
	this.stage.removeEventListner("onmouseout",this.stopDragFunc);
	delete this.stopDragFunc;
};
/**
 * Shape 类
 * 图形（具体）
 * 无任何交互功能
 */
function Shape(ctx) {
	DisplayObject.call(this);//继承
	this.ctx=ctx;
	this.draw= function() {//绘制函数
	};
}
Shape.prototype.render=function(){//渲染函数，即绘制自己
	this.draw();
};

/**
 * SimpleButton 类
 * 普通按钮（具体）
 * 根据三态图形形成按钮。
 */
function SimpleButton(ctx) {
	InteractiveObject.call(this);//继承
	this.upState=new Shape(ctx);//三态图形
	this.overState=new Shape(ctx);
	this.downState=new Shape(ctx);
	this.curState="up";//当前状态，可为“up” “over” “down”
	//根据不同事件改变当前状态
	this.addEventListner("onmouseover", function(param) {
	return function(x,y) {
	param.curState="over";
	}
	}(this));
	this.addEventListner("onmousedown", function(param) {
	return function(x,y) {
	param.curState="down";
	}
	}(this));
	this.addEventListner("onmouseup", function(param) {
	return function(x,y) {
	param.curState="up";
	}
	}(this));
	this.addEventListner("onmouseout", function(param) {
	return function(x,y) {
	param.curState="up";
	}
	}(this));
};

SimpleButton.prototype=new InteractiveObject();//继承
SimpleButton.prototype.render= function() {//渲染
	switch(this.curState) {//判断当前状态，进行不同图形绘制
	case "up":
	if(this.upState!=null && this.upState!=undefined) {
	this.upState.width=this.width;
	this.upState.height=this.height;
	this.upState.draw();
	}
	break;
	case "down":
	if(this.downState!=null && this.downState!=undefined) {
	this.downState.width=this.width;
	this.downState.height=this.height;
	this.downState.draw();
	}
	break;
	case "over":
	if(this.overState!=null && this.overState!=undefined) {
	this.overState.width=this.width;
	this.overState.height=this.height;
	this.overState.draw();
	}
	break;
	}
};

<!DOCTYPE HTML>

<html>

	<head>

	<meta charset=UTF-8 />

	<title>智圆行方JCanvas库　之　实时追踪</title>

	<script type="text/javascript" src="JCanvas+.js"></script>
	</head>

	<body>

	<canvas id="myCanvas" width="800" height="600">
	您的浏览器不支持Canvas标签。

	IE用户请务必使用IE9（不兼容XP）及以上版本；

	其它浏览器用户请尽量使用最新版本浏览器。
	</canvas>

	<script type="text/javascript">
	var canvas=document.getElementById("myCanvas");//获得canvas对象

	var stage=new Stage(canvas);//一个canvas对象只能对应且必须对应一个Stage类型的实例

	var myself=new Sprite(stage.ctx);
	myself.x=myself.y=50;
	myself.width=50;
	myself.height=50;
	myself.draw= function() {
	this.ctx.beginPath();
	this.ctx.arc(0,0,25,0,Math.PI*2,true);
	this.ctx.closePath();
	this.ctx.fillStyle="black";
	this.ctx.fill();
	};
	var badMan=new Sprite(stage.ctx);
	badMan.x=500;
	badMan.y=500;
	badMan.width=50;
	badMan.height=50;
	badMan.draw= function() {
	this.ctx.beginPath();
	this.ctx.arc(0,0,25,0,Math.PI*2,true);
	this.ctx.closePath();
	this.ctx.fillStyle="red";
	this.ctx.fill();
	};
	var btn1=new SimpleButton(stage.ctx);
	btn1.width=200;
	btn1.height=50;
	btn1.upState.draw= function() {
	this.ctx.fillStyle="blue";
	this.ctx.fillRect(0,0,this.width,this.height);
	};
	btn1.downState.draw= function() {
	this.ctx.fillStyle="black";
	this.ctx.fillRect(0,0,this.width,this.height);
	};
	btn1.overState.draw= function() {
	this.ctx.fillStyle="yellow";
	this.ctx.fillRect(0,0,this.width,this.height);
	};
	btn1.addEventListner("onclick",function(){
	alert("哈哈！");
	});
	stage.addChild(myself);
	stage.addChild(badMan);
	stage.addChild(btn1);
	stage.onEnterFrame= function() {
	badMan.x+=(myself.x-badMan.x)*0.1;
	badMan.y+=(myself.y-badMan.y)*0.1;
	};
	stage.addEventListner("onmousemove", function(x,y) {
	myself.x=x;
	myself.y=y;
	});
	stage.start();
	</script>
	</body>

</html>