【CSON原创】HTML5游戏框架cnGameJS开发实录(基本图形模块篇)

返回目录

1.功能

  该模块也很简单,主要包括三个基础图形的绘制:矩形 圆形 文字。我们把一个个图像以构造函数的模式封装,例如当我们需要绘制一个矩形对象,我们首先new出一个矩形对象,再调用对象的draw方法进行绘制。例如:

var rect=new cnGame.shape.Rect();
rect.draw();

2.实现

  该模块包括三个图形对象,因此我们建立三个构造函数,它们分别有自己的各种方法,包括绘制,移动,旋转,尺寸调整等等,由于三个对象的方法有较多相似,我们以矩形对象为例进行解释,首先看构造函数:

    /**
*矩形对象
*
*/
var rect=function(options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(options);
}
this.init(options);
}

  需要注意的是,该函数如果不是以构造函数方式调用,则会return new 构造函数,使函数始终以构造函数方式调用,返回生成的矩形对象。之后调用init进行初始化。

另外虽然每个对象有不同的属性,但是我们也应该为对象设定默认对象。这里就需要使用到之前在core模块extend函数,使用户设定的参数和默认对象的参数融合:

            /**
*默认值对象
*
*/
var defaultObj={
x:0,
y:0,
width:100,
height:100

};
options=options||{};
options=cg.core.extend(defaultObj,options);

  对于矩形,有一个特别之处是它有四个顶点,因此我们可以在保存x,y坐标之余,保存right顶点,和bottom顶点,方便以后矩形碰撞的检测,该函数也很简单,就是根据宽高和xy计算right和bottom:

    /**
*更新right和bottom
*
*/
var resetRightBottom=function(elem){
elem.right=elem.x+elem.width;
elem.bottom=elem.y+elem.height;
}

  当矩形都有了它的位置和尺寸参数后,我们就可以 根据之前的参数把它绘制出来(分别有填充和描边两种模式):

        /**
*绘制矩形
*
*/
draw:function(style,isFill){
var context=cg.context;
(cg.core.isUndefined(isFill))&&(isFill=true);
if(isFill){
context.fillStyle = style;
context.fillRect(this.x, this.y, this.width, this.height);
}
else{
context.strokeStyle = style;
context.strokeRect(this.x, this.y, this.width, this.height);
}

return this;

}

  另外,为了方便开发或测试,对象也提供其他各种改变自己参数的方法:

  1.move:使矩形移动一定距离

  2.moveTo:使矩形移动到特定距离

  3.resize:改变矩形一定尺寸

  4.resizeTo:把矩形改变到特定尺寸

  这些方法最后都return this;使方法都支持链式调用。

  该模块也比较简单,就不再详述。最后给出该模块所有的源码:

/**
*
*canvas基本形状对象
*
*
*/
cnGame.register("cnGame.shape",function(cg){

/**
*更新right和bottom
*
*/
var resetRightBottom=function(elem){
elem.right=elem.x+elem.width;
elem.bottom=elem.y+elem.height;
}
/**
*矩形对象
*
*/
var rect=function(options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(options);
}
this.init(options);
}
rect.prototype={
/**
*初始化
*
*/
init:function(options){
/**
*默认值对象
*
*/
var defaultObj={
x:0,
y:0,
width:100,
height:100,
style:"red",
isFill:true

};
options=options||{};
options=cg.core.extend(defaultObj,options);
this.setOptions(options);

resetRightBottom(this);
},
/**
*绘制矩形
*
*/
setOptions:function(options){
this.x=options.x;
this.y=options.y;
this.width=options.width;
this.height=options.height;
this.style=options.style;
this.isFill=this.isFill;
},
/**
*绘制矩形
*
*/
draw:function(){
var context=cg.context;
if(this.isFill){
context.fillStyle = this.style;
context.fillRect(this.x, this.y, this.width, this.height);
}
else{
context.strokeStyle = this.style;
context.strokeRect(this.x, this.y, this.width, this.height);
}

return this;

},
/**
*将矩形移动一定距离
*
*/
move:function(dx,dy){
dx=dx||0;
dy=dy||0;
this.x+=dx;
this.y+=dy;
resetRightBottom(this);
return this;
},
/**
*将矩形移动到特定位置
*
*/
moveTo:function(x,y){
x=x||this.x;
y=y||this.y;
this.x=x;
this.y=y;
resetRightBottom(this);
return this;
},
/**
*将矩形改变一定大小
*
*/
resize:function(dWidth,dHeight){
dWidth=dWidth||0;
dHeight=dHeight||0;
this.width+=dWidth;
this.height+=dHeight;
resetRightBottom(this);
return this;

},
/**
*将矩形改变到特定大小
*
*/
resizeTo:function(width,height){
width=width||this.width;
height=height||this.height;
this.width=width;
this.height=height;
resetRightBottom(this);
return this;
}
}

/**
*圆形对象
*
*/
var circle=function(options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(options);
}
this.init(options);
}
circle.prototype={
/**
*初始化
*
*/
init:function(options){
/**
*默认值对象
*
*/
var defaultObj={
x:100,
y:100,
r:100,
startAngle:0,
endAngle:Math.PI*2,
antiClock:false,
style:"red",
isFill:true
};
options=options||{};
options=cg.core.extend(defaultObj,options);
this.setOptions(options);

},
/**
*设置参数
*
*/
setOptions=function(options){
this.x=options.x;
this.y=options.y;
this.r=options.r;
this.startAngle=options.startAngle;
this.endAngle=options.endAngle;
this.antiClock=options.antiClock;
this.isFill=options.isFill;
this.style=options.style;
},
/**
*绘制圆形
*
*/
draw:function(){
var context=cg.context;
context.beginPath();
context.arc(this.x,this.y,this.r,this.startAngle,this.endAngle,this.antiClock);
context.closePath();
if(this.isFill){
context.fillStyle=this.style;
context.fill();
}
else{
context.strokeStyle=this.style;
context.stroke();
}

},
/**
*将圆形移动一定距离
*
*/
move:function(dx,dy){
dx=dx||0;
dy=dy||0;
this.x+=dx;
this.y+=dy;
return this;
},
/**
*将圆形移动到特定位置
*
*/
moveTo:function(x,y){
x=x||this.x;
y=y||this.y;
this.x=x;
this.y=y;
return this;
},
/**
*将圆形改变一定大小
*
*/
resize:function(dr){
dr=dr||0;
this.r+=dr;
return this;

},
/**
*将圆形改变到特定大小
*
*/
resizeTo:function(r){
r=r||this.r;
this.r=r;
return this;
}
}
/**
*将圆形改变到特定大小
*
*/
var text=function(text,options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(text,options);
}
this.init(text,options);

}
text.prototype={
/**
*初始化
*
*/
init:function(text,options){
/**
*默认值对象
*
*/
var defaultObj={
x:100,
y:100,
style:"red",
isFill:true

};
options=options||{};
options=cg.core.extend(defaultObj,options);
this.setOptions(options);
this.text=text;
},
/**
*绘制
*
*/
draw:function(){
var context=cg.context;
(!cg.core.isUndefined(this.font))&&(context.font=this.font);
(!cg.core.isUndefined(this.textBaseline))&&(context.textBaseline=this.textBaseline);
(!cg.core.isUndefined(this.textAlign))&&(context.textAlign=this.textAlign);
(!cg.core.isUndefined(this.maxWidth))&&(context.maxWidth=this.maxWidth);
if(this.isFill){
context.fillStyle=this.style;
this.maxWidth?context.fillText(this.text,this.x,this.y,this.maxWidth):context.fillText(this.text,this.x,this.y);
}
else{
context.strokeStyle=this.style;
this.maxWidth?context.strokeText(this.text,this.x,this.y,this.maxWidth):context.strokeText(this.text,this.x,this.y);
}
},
/**
*设置参数
*
*/
setOptions:function(options){
this.x=options.x||this.x;
this.y=options.y||this.y;
this.maxWidth=options.maxWidth||this.maxWidth;
this.font=options.font||this.font;
this.textBaseline=options.textBaseline||this.textBaseline;
this.textAlign=options.textAlign||this.textAlign;
this.isFill=options.isFill||this.isFill;
this.style=options.style||this.style;

}
}

this.Text=text;
this.Rect=rect;
this.Circle=circle;

});



 

 

 

  




posted @ 2012-02-14 12:42  Cson  阅读(...)  评论(...编辑  收藏