WebGL笔记（五）：封装顶点和颜色等数组数据（一）

顶点和颜色数据，均是数组类型，但数据冗长，例如一个立方体的颜色数据长度有96个，顶点为72个，管理比较麻烦。但是二者又有很大的相似性，不同之处仅在于分组的大小和取值范围。按照面向对象编程的思路，应该首先封装一个数组管理基类，然后通过继承和重载来分别实现顶点和颜色类。

基于Javascript面向对象方面的特性，首先建立一个工厂类作为实现继承的工具：

var Inherit = {
    /* 对对象进行浅表复制，主要用于重载（覆盖）某些方法或属性 */
    extend : function(o, oo){
        for(var p in oo){ o[p] = oo[p]; };
        p = null;
    },
    /*
    * 通过创建的基类实例建立原型链，实现继承
    * target:子类构造函数名
    * obj:基类实例
    * ext:扩展属性，包括子类独有的属性/方法和需要重载的部分
    */
    inherit : function(target, obj, ext){
        if(typeof target != 'function') return;
        target.prototype = obj;
        if(!!ext && ext instanceof Object){
            this.extend(target.prototype, ext);
        }
    }
}

然后建立一个数组管理基类ArrayHelper

/*
* ArrayHelper
* 数组管理基类
* by MK 2011-12-1
*/
function ArrayHelper(){ }
ArrayHelper.prototype = {
    IS_ArrayHelper : true,
    /* 分组单元长度，初始值为1，颜色应为4，定点应为3，需重载 */
    length : 1,
    /* 附加到原始数组
    @data:原始数组
    @offset:位于原始数组的偏移量
    */
    attach : function(data, offset){
        delete this.data;
        delete this.offset;
        if(data instanceof Array){
            this.data = data;
            this.offset = Math.max(offset || 0, 0);
        }
    },
    /* 遍历所位于的数组区域，并执行回调函数 */
    each : function(callback){
        if(typeof callback == 'function'){
            for(var i = 0; i < this.length; i++){
                callback(this.data, i + this.offset, i);
            }
        }
    },
    /* 获取本区索引位置值，index为相对位置 */
    get : function(index){
        if(typeof index == 'number' && index < this.length){
            return this.data[index + this.offset];
        }
    },
    /* 设置本区索引位置值，index为相对位置。具体执行取决于参数状态。需重载 */
    set : function(value, index){
        if(typeof index == 'number' && index < this.length){
            this.data[index + this.offset] = value;
        } else if(value instanceof Array){
            this.each(function(data, ii, i){
                if(i < value.length){
                    data[ii] = value[i];
                }
            });
        } else if(value === 0 || !!value){
            this.each(function(data, ii){
                data[ii] = value;
            });
        }
    },
    /* 本区数据归零 */
    clear : function(){
        this.each(function(data, ii){ data[ii] = 0; });
    },
    /* 返回本区数据的一个副本 */
    array : function(){
        return this.data.slice(this.offset, this.offset + this.length);
    }
}

下面使用Iherit对其进行继承重载，实现顶点与颜色两个区域管理类。

首先是颜色类

/*
ColorHelper
颜色管理类
by MK 2011-12-2
*/
var ColorHelper = function(data, offset){
    /* 尝试附加数据 */
    this.attach(data, offset);
    /* 重载本区长度值 */
    this.length = 4;
}
/* 扩展ColorHelper的静态方法 */
Inherit.extend(ColorHelper, {
    /* 对象转换为颜色数据。转换失败则返回0 */
    ObjectToNumber : function(s, d){
        return (!!s?isNaN(s=Number('0x'+((s=s+'').length>1?s.substr(0,2):s+s)))?d||0:s:s===0?s:d||0)/255;
    },
    /*
    * 将CSS颜色标记转换为颜色数组 [R, G, B, A]。
    * 返回一个4个元素的数组，每个元素均在0~1之间
    * 仅接受字符串类型参数
    * 处理方法：
    * 1. #fff/#ffff，以#ffffff或#ffffffff方式解读
    * 2. #ffffff/#ffffffff，转换为三组或四组数据，顺序为R G B A。A部分失缺按ff处理
    * 3. 5字补齐为6字，7字补齐为8字
    * 4. 大于8字取前8字；小于3字，例如#cc，按#ccccccff处理
    * 5. 井号不必需，读取时会掠过。
    */
    FromCSS : function(v){
        if(typeof v != 'string' || !v.length) return null;
        if(v.charAt(0) == '#') v = v.substr(1);
        if(v.length < 3){
            return [v = this.ObjectToNumber(v), v, v, 1];
        }
        var reg;
        switch(v.length){
            case 3: case 4:
                reg = /[0-f]/ig;
                break;
            case 6: case 8:
                reg = /[0-f]{2}/ig;
                break;
            case 5: case 7:
                return this.FromCSS(v + v.charAt(v.length - 1));
            default:
                return this.FromCSS(v.substr(0, 8));
        }
        arr = []
        v.replace(reg,function(m){arr.push(ColorHelper.ObjectToNumber(m));});
        v = reg = null;
        return arr;
    },
    /* 返回一个0~1之间的数 */
    Fix : function(v){
        return typeof v != 'number'
            ? this.ObjectToNumber(v)
            : this.Range(v > 1 ? v / 255 : v, 0, 1);
    },
    /* 返回指定范围的数 */
    Range : function(v, mi, ma){
        return Math.max(mi, Math.min(ma, v))
    }
});
/* ColorHelper 对 ArrayHelper 的继承与重载 */
Inherit.inherit(ColorHelper, new ArrayHelper(), {
    /* 随机设置RGB三个值 */
    rand : function(){
        this.each(function(data, ii){
            data[ii] = Math.random();
        });
        this.set(1, 3);
    },
    /*
    * 重载set
    * 动态参数
    * 处理方式：
    * 1. 没有参数时，RGB归零，A=1
    * 2. 1个参数时，字符串类型则尝试转换为CSS颜色，数字类型则调用基类set方法赋值
    * 3. 2个或更多参数时，调用基类set方法赋值
    */
    set : function(){
        var args = Array.prototype.slice.call(arguments, 0)
            , _set = ArrayHelper.prototype.set;
            ;
        switch(args.length){
            case 0:
                this.clear();
                _set.apply(this, [1, 3]);
                break;
            case 1:
                if(typeof args[0] == 'string' && args[0].length){
                    _set.call(this, ColorHelper.FromCSS(args[0]));
                } else if(typeof args[0] == 'number'){
                    _set.call(this, ColorHelper.Fix(args[0]));
                }
                break;
            case 2:
                args[0] = ColorHelper.Fix(args[0]);
                args[1] = typeof args[1] == 'number' ? ColorHelper.Range(args[1], 0, 3) : 0;
                _set.apply(this, args);
                break;
            default:
                var i = 0, len = args.length;
                for(; i < len; i++){
                    args[i] = ColorHelper.Fix(args[i]);
                }
                _set.call(this, args);
                break;
        }
        args = _set = null;
    }
});

顶点类比较简单

/*
* VerticesHelper
* 顶点管理类
* by MK 2011-12-2
*/
function VerticesHelper(data, offset){
    this.attach(data, offset);
    this.length = 3;
}
/* VerticesHelper 对 ArrayHelper 继承和重载 */
Inherit.inherit(VerticesHelper, new ArrayHelper(), {
    /*
    * 将本区每个值增长一个值，实现顶点的移动
    * index有效时，对指定索引处赋值
    * index无效时，对本区全体赋值
    */
    move : function(v, index){
        if(typeof v != 'number' && (!v || isNaN(v = parseFloat(v)))){
            v = 0;
        }
        if(typeof index == 'number'){
            this.set(this.get(index) * v, index);
        } else {
            this.each(function(data, ii, i){
                data[ii] += v;
            });
        }
    }
});

今天先写到这里。关于继承和重载方面欢迎大家多提意见。今天周末，祝大家周末愉快，我得回家了。

下一篇将介绍一个GroupHelper和ArrayHelper结合管理整个数组的应用，并扩展VerticesGroup和ColorGroup。代码文件先不上传了，有些地方还要完善一下，至少注释还没写完整哈！