【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;
});
浙公網安備 33010602011771號