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; });
以上是HTML5遊戲框架cnGameJS開發實錄-基本圖形模組篇的詳細內容。更多資訊請關注PHP中文網其他相關文章!