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