1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * <iframe src='../../../examples/Text.html?noHeader' width = '320' height = '240' scrolling='no'></iframe>
  9  * <br/>
 10  * @class Text类提供简单的文字显示功能。复杂的文本功能可以使用DOMElement。
 11  * @augments View
 12  * @mixes CacheMixin
 13  * @borrows CacheMixin#cache as #cache
 14  * @borrows CacheMixin#updateCache as #updateCache
 15  * @borrows CacheMixin#setCacheDirty as #setCacheDirty
 16  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。
 17  * @module hilo/view/Text
 18  * @requires hilo/core/Class
 19  * @requires hilo/core/Hilo
 20  * @requires hilo/view/View
 21  * @requires hilo/view/CacheMixin
 22  * @property {String} text 指定要显示的文本内容。
 23  * @property {String} color 指定使用的字体颜色。
 24  * @property {String} textAlign 指定文本的对齐方式。可以是以下任意一个值：'start', 'end', 'left', 'right', and 'center'。注意：必须设置文本的 width 属性才能生效。
 25  * @property {String} textVAlign 指定文本的垂直对齐方式。可以是以下任意一个值：'top', 'middle', 'bottom'。注意：必须设置文本的 height 属性才能生效。
 26  * @property {Boolean} outline 指定文本是绘制边框还是填充。
 27  * @property {Number} lineSpacing 指定文本的行距。单位为像素。默认值为0。
 28  * @property {Number} maxWidth 指定文本的最大宽度。默认值为200。
 29  * @property {String} font 文本的字体CSS样式。只读属性。设置字体样式请用setFont方法。
 30  * @property {Number} textWidth 指示文本内容的宽度，只读属性。仅在canvas模式下有效。
 31  * @property {Number} textHeight 指示文本内容的高度，只读属性。仅在canvas模式下有效。
 32  */
 33 var Text = Class.create(/** @lends Text.prototype */{
 34     Extends: View,
 35     Mixes:CacheMixin,
 36     constructor: function(properties){
 37         properties = properties || {};
 38         this.id = this.id || properties.id || Hilo.getUid('Text');
 39         Text.superclass.constructor.call(this, properties);
 40 
 41         // if(!properties.width) this.width = 200; //default width
 42         if(!properties.font) this.font = '12px arial'; //default font style
 43         this._fontHeight = Text.measureFontHeight(this.font);
 44     },
 45 
 46     text: '',
 47     color: '#000',
 48     textAlign: null,
 49     textVAlign: null,
 50     outline: false,
 51     lineSpacing: 0,
 52     maxWidth: 200,
 53     font: null, //ready-only
 54     textWidth: 0, //read-only
 55     textHeight: 0, //read-only
 56 
 57     /**
 58      * 设置文本的字体CSS样式。
 59      * @param {String} font 要设置的字体CSS样式。
 60      * @returns {Text} Text对象本身。链式调用支持。
 61      */
 62     setFont: function(font){
 63         var me = this;
 64         if(me.font !== font){
 65             me.font = font;
 66             me._fontHeight = Text.measureFontHeight(font);
 67         }
 68 
 69         return me;
 70     },
 71 
 72     /**
 73      * 覆盖渲染方法。
 74      * @private
 75      */
 76     render: function(renderer, delta){
 77         var me = this;
 78 
 79         if(renderer.renderType === 'canvas'){
 80             if(this.drawable){
 81                 renderer.draw(me);
 82             }
 83             else{
 84                 me._draw(renderer.context);
 85             }
 86         }
 87         else if(renderer.renderType === 'dom'){
 88             var drawable = me.drawable;
 89             var domElement = drawable.domElement;
 90             var style = domElement.style;
 91 
 92             style.font = me.font;
 93             style.textAlign = me.textAlign;
 94             style.color = me.color;
 95             style.width = me.width + 'px';
 96             style.height = me.height + 'px';
 97             style.lineHeight = (me._fontHeight + me.lineSpacing) + 'px';
 98 
 99             domElement.innerHTML = me.text;
100             renderer.draw(this);
101         }
102         else{
103             //TODO:自动更新cache  TODO:auto update cache
104             me.cache();
105             renderer.draw(me);
106         }
107     },
108 
109     /**
110      * 在指定的渲染上下文上绘制文本。
111      * @private
112      */
113     _draw: function(context){
114         var me = this, text = me.text.toString();
115         if(!text) return;
116 
117         //set drawing style
118         context.font = me.font;
119         context.textAlign = me.textAlign;
120         context.textBaseline = 'top';
121 
122         //find and draw all explicit lines
123         var lines = text.split(/\r\n|\r|\n|<br(?:[ \/])*>/);
124         var width = 0, height = 0;
125         var lineHeight = me._fontHeight + me.lineSpacing;
126         var i, line, w, len, wlen;
127         var drawLines = [];
128 
129         for(i = 0, len = lines.length; i < len; i++){
130             line = lines[i];
131             w = context.measureText(line).width;
132 
133             //check if the line need to split
134             if(w <= me.maxWidth){
135                 drawLines.push({text:line, y:height});
136                 // me._drawTextLine(context, line, height);
137                 if(width < w) width = w;
138                 height += lineHeight;
139                 continue;
140             }
141 
142             var str = '', oldWidth = 0, newWidth, j, word;
143 
144             for(j = 0, wlen = line.length; j < wlen; j++){
145                 word = line[j];
146                 newWidth = context.measureText(str + word).width;
147 
148                 if(newWidth > me.maxWidth){
149                     drawLines.push({text:str, y:height});
150                     // me._drawTextLine(context, str, height);
151                     if(width < oldWidth) width = oldWidth;
152                     height += lineHeight;
153                     str = word;
154                 }else{
155                     oldWidth = newWidth;
156                     str += word;
157                 }
158 
159                 if(j == wlen - 1){
160                     drawLines.push({text:str, y:height});
161                     // me._drawTextLine(context, str, height);
162                     if(str !== word && width < newWidth) width = newWidth;
163                     height += lineHeight;
164                 }
165             }
166         }
167 
168         me.textWidth = width;
169         me.textHeight = height;
170         if(!me.width) me.width = width;
171         if(!me.height) me.height = height;
172 
173         //vertical alignment
174         var startY = 0;
175         switch(me.textVAlign){
176             case 'middle':
177                 startY = me.height - me.textHeight >> 1;
178                 break;
179             case 'bottom':
180                 startY = me.height - me.textHeight;
181                 break;
182         }
183 
184         //draw background
185         var bg = me.background;
186         if(bg){
187             context.fillStyle = bg;
188             context.fillRect(0, 0, me.width, me.height);
189         }
190 
191         if(me.outline) context.strokeStyle = me.color;
192         else context.fillStyle = me.color;
193 
194         //draw text lines
195         for(i = 0; i < drawLines.length; i++){
196             line = drawLines[i];
197             me._drawTextLine(context, line.text, startY + line.y);
198         }
199     },
200 
201     /**
202      * 在指定的渲染上下文上绘制一行文本。
203      * @private
204      */
205     _drawTextLine: function(context, text, y){
206         var me = this, x = 0, width = me.width;
207 
208         switch(me.textAlign){
209             case 'center':
210                 x = width >> 1;
211                 break;
212             case 'right':
213             case 'end':
214                 x = width;
215                 break;
216         }
217 
218         if(me.outline) context.strokeText(text, x, y);
219         else context.fillText(text, x, y);
220     },
221 
222     Statics: /** @lends Text */{
223         /**
224          * 测算指定字体样式的行高。
225          * @param {String} font 指定要测算的字体样式。
226          * @return {Number} 返回指定字体的行高。
227          */
228         measureFontHeight: function(font){
229             var docElement = document.documentElement, fontHeight;
230             var elem = Hilo.createElement('div', {style:{font:font, position:'absolute'}, innerHTML:'M'});
231 
232             docElement.appendChild(elem);
233             fontHeight = elem.offsetHeight;
234             docElement.removeChild(elem);
235             return fontHeight;
236         }
237     }
238 
239 });
240