【CSON原創(chuàng)】HTML5游戲框架cnGameJS開發(fā)實錄（基本圖形模塊篇）

返回目錄 1.功能　　該模塊也很簡單，主要包括三個基礎(chǔ)圖形的繪制：矩形圓形文字。我們把一個個圖像以構(gòu)造函數(shù)的模式封裝，例如當我們需要繪制一個矩形對象，我們首先new出一個矩形對象，再調(diào)用對象的draw方法進行繪制。例如：

返回目錄

1.功能

　　該模塊也很簡單，主要包括三個基礎(chǔ)圖形的繪制：矩形圓形文字。我們把一個個圖像以構(gòu)造函數(shù)的模式封裝，例如當我們需要繪制一個矩形對象，我們首先new出一個矩形對象，再調(diào)用對象的draw方法進行繪制。例如：

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

2.實現(xiàn)

　　該模塊包括三個圖形對象，因此我們建立三個構(gòu)造函數(shù)，它們分別有自己的各種方法，包括繪制，移動，旋轉(zhuǎn)，尺寸調(diào)整等等，由于三個對象的方法有較多相似，我們以矩形對象為例進行解釋，首先看構(gòu)造函數(shù)：

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

　　需要注意的是，該函數(shù)如果不是以構(gòu)造函數(shù)方式調(diào)用，則會return new 構(gòu)造函數(shù)，使函數(shù)始終以構(gòu)造函數(shù)方式調(diào)用，返回生成的矩形對象。之后調(diào)用init進行初始化。

另外雖然每個對象有不同的屬性，但是我們也應(yīng)該為對象設(shè)定默認對象。這里就需要使用到之前在core模塊extend函數(shù)，使用戶設(shè)定的參數(shù)和默認對象的參數(shù)融合：

            /**
             *默認值對象
            **/                                                
            var defaultObj={
                x:0,
                y:0,
                width:100,
                height:100
                
            };
            options=options||{};
            options=cg.core.extend(defaultObj,options);

　　對于矩形，有一個特別之處是它有四個頂點，因此我們可以在保存x，y坐標之余，保存right頂點，和bottom頂點，方便以后矩形碰撞的檢測，該函數(shù)也很簡單，就是根據(jù)寬高和xy計算right和bottom：

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

　　當矩形都有了它的位置和尺寸參數(shù)后，我們就可以　根據(jù)之前的參數(shù)把它繪制出來（分別有填充和描邊兩種模式）：

        /**
         *繪制矩形
        **/    
        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;
            
        }

　　另外，為了方便開發(fā)或測試，對象也提供其他各種改變自己參數(shù)的方法：

　　1.move：使矩形移動一定距離

　　2.moveTo:使矩形移動到特定距離

　　3.resize：改變矩形一定尺寸

　　4.resizeTo：把矩形改變到特定尺寸

　　這些方法最后都return this;使方法都支持鏈式調(diào)用。

　　該模塊也比較簡單，就不再詳述。最后給出該模塊所有的源碼：

/**
 *
 *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);
        
        },
        /**
         *設(shè)置參數(shù)
        **/
        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);
            }
        },
        /**
        *設(shè)置參數(shù)
        **/
        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 閱讀(2076) 評論(0) 收藏舉報

刷新頁面返回頂部

【CSON原創(chuàng)】HTML5游戲框架cnGameJS開發(fā)實錄（基本圖形模塊篇）

公告