      1 /**
      2  * Hilo
      3  * Copyright 2015 alibaba.com
      4  * Licensed under the MIT License
      5  */
      6
      7 /**
      8  * <iframe src='../../../examples/BitmapText.html?noHeader' width = '550' height = '80' scrolling='no'></iframe>
      9  * <br/>
     10  * @class BitmapText类提供使用位图文本的功能。当前仅支持单行文本。
     11  * @augments Container
     12  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。
     13  * @module hilo/view/BitmapText
     14  * @requires hilo/core/Class
     15  * @requires hilo/core/Hilo
     16  * @requires hilo/view/Container
     17  * @requires hilo/view/Bitmap
     18  * @property {Object} glyphs 位图字体的字形集合。格式为：{letter:{image:img, rect:[0,0,100,100]}}。
     19  * @property {Number} letterSpacing 字距，即字符间的间隔。默认值为0。
     20  * @property {String} text 位图文本的文本内容。只读属性。设置文本请使用setText方法。
     21  * @property {String} textAlign 文本对齐方式，值为left、center、right, 默认left。只读属性。设置文本对齐方式请使用setTextAlign方法。
     22  */
     23 var BitmapText = Class.create(/** @lends BitmapText.prototype */{
     24     Extends: Container,
     25     constructor: function(properties){
     26         properties = properties || {};
     27         this.id = this.id || properties.id || Hilo.getUid('BitmapText');
     28         BitmapText.superclass.constructor.call(this, properties);
     29
     30         var text = properties.text + '';
     31         if(text){
     32             this.text = '';
     33             this.setText(text);
     34         }
     35
     36         this.pointerChildren = false; //disable user events for single letters
     37     },
     38
     39     glyphs: null,
     40     letterSpacing: 0,
     41     text: '',
     42     textAlign:'left',
     43
     44     /**
     45      * 设置位图文本的文本内容。
     46      * @param {String} text 要设置的文本内容。
     47      * @returns {BitmapText} BitmapText对象本身。链式调用支持。
     48      */
     49     setText: function(text){
     50         var me = this, str = text.toString(), len = str.length;
     51         if(me.text == str) return;
     52         me.text = str;
     53
     54         var i, charStr, charGlyph, charObj, width = 0, height = 0, left = 0;
     55         for(i = 0; i < len; i++){
     56             charStr = str.charAt(i);
     57             charGlyph = me.glyphs[charStr];
     58             if(charGlyph){
     59                 left = width + (width > 0 ? me.letterSpacing : 0);
     60                 if(me.children[i]){
     61                     charObj = me.children[i];
     62                     charObj.setImage(charGlyph.image, charGlyph.rect);
     63                 }
     64                 else{
     65                     charObj = me._createBitmap(charGlyph);
     66                     me.addChild(charObj);
     67                 }
     68                 charObj.x = left;
     69                 width = left + charGlyph.rect[2];
     70                 height = Math.max(height, charGlyph.rect[3]);
     71             }
     72         }
     73
     74         for(i = me.children.length - 1;i >= len;i --){
     75             me._releaseBitmap(me.children[i]);
     76             me.children[i].removeFromParent();
     77         }
     78
     79         me.width = width;
     80         me.height = height;
     81         this.setTextAlign();
     82         return me;
     83     },
     84     _createBitmap:function(cfg){
     85         var bmp;
     86         if(BitmapText._pool.length){
     87             bmp = BitmapText._pool.pop();
     88             bmp.setImage(cfg.image, cfg.rect);
     89         }
     90         else{
     91             bmp = new Bitmap({
     92                 image:cfg.image,
     93                 rect:cfg.rect
     94             });
     95         }
     96         return bmp;
     97     },
     98     _releaseBitmap:function(bmp){
     99         BitmapText._pool.push(bmp);
    100     },
    101
    102      /**
    103       * 设置位图文本的对齐方式。
    104      * @param textAlign 文本对齐方式，值为left、center、right
    105      * @returns {BitmapText} BitmapText对象本身。链式调用支持。
    106      */
    107     setTextAlign:function(textAlign){
    108         this.textAlign = textAlign||this.textAlign;
    109         switch(this.textAlign){
    110             case "center":
    111                 this.pivotX = this.width * .5;
    112                 break;
    113             case "right":
    114                 this.pivotX = this.width;
    115                 break;
    116             case "left":
    117                 /* falls through */
    118             default:
    119                 this.pivotX = 0;
    120                 break;
    121         }
    122         return this;
    123     },
    124
    125     /**
    126      * 返回能否使用当前指定的字体显示提供的字符串。
    127      * @param {String} str 要检测的字符串。
    128      * @returns {Boolean} 是否能使用指定字体。
    129      */
    130     hasGlyphs: function(str){
    131         var glyphs = this.glyphs;
    132         if(!glyphs) return false;
    133
    134         str = str.toString();
    135         var len = str.length, i;
    136         for(i = 0; i < len; i++){
    137             if(!glyphs[str.charAt(i)]) return false;
    138         }
    139         return true;
    140     },
    141
    142     Statics:/** @lends BitmapText */{
    143         _pool:[],
    144         /**
    145          * 简易方式生成字形集合。
    146          * @static
    147          * @param {String} text 字符文本。
    148          * @param {Image} image 字符图片。
    149          * @param {Number} col 列数  默认和文本字数一样
    150          * @param {Number} row 行数 默认1行
    151          * @returns {BitmapText} BitmapText对象本身。链式调用支持。
    152          */
    153         createGlyphs:function(text, image, col, row){
    154             var str = text.toString();
    155             col = col||str.length;
    156             row = row||1;
    157             var w = image.width/col;
    158             var h = image.height/row;
    159             var glyphs = {};
    160             for(var i = 0, l = text.length;i < l;i ++){
    161                 var charStr = str.charAt(i);
    162                 glyphs[charStr] = {
    163                     image:image,
    164                     rect:[w * (i % col), h * Math.floor(i / col), w, h]
    165                 };
    166             }
    167             return glyphs;
    168         }
    169     }
    170
    171 });
    172