HTML5游戏框架cnGameJS开发实录-基本图形模块篇

百变鹏仔 2个月前 (10-18) #H5教程

文章标签实录

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开发实录-基本图形模块篇

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集