本文主要包含JCanvas， 开发接口 等相关知识,匿名希望在学习及工作中可以帮助到您
最新动态：/content/10088155.html
把以下内容复制到文本文档中，另存为JCanvas.js
把以下内容复制到文本文档中，另存为JCanvas.js
/**
* @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++) {//