hanyeah 专注于AS

createjs指定文本最大高度

createjs中,可以指定Text的宽度,高度会随着内容的增加自动增加。

有时候,我们希望文本只显示在某个矩形框内,超出的部分不显示,也就是overflow-y:hidden的效果。

给Text加一个遮罩可以实现,但是用遮罩,文字可能会显示半行。

为了满足需求,我又改了一下createjs的源码,给Text加了一个maxHeight和autoSize属性,修改了_drawText的源码。

添加maxHeight和autoSize属性:

/**
		 * Indicates the maximum width for a line of text before it is wrapped to multiple lines. If null,
		 * the text will not be wrapped.
		 * @property lineWidth
		 * @type Number
		 **/
		this.lineWidth = null;
		/**
		 * hanyeah添加
		 * 指定最大高度,如果autoSize设置为true时,文本高度将不会大于这个值。
		 * @type Number
		 */
		this.maxHeight=Infinity;
		/**
		 * hanyeah添加
		 * 当高度大于指定的高度时,是否自动调整尺寸。
		 * @type Boolean
		 */
		this.autoSize=true;

_drawText的源码:

/**
	 * Draws multiline text.
	 * @method _drawText
	 * @param {CanvasRenderingContext2D} ctx
	 * @param {Object} o
	 * @param {Array} lines
	 * @return {Object}
	 * @protected
	 **/
	p._drawText = function(ctx, o, lines) {
		var paint = !!ctx;
		if (!paint) {
			ctx = Text._workingContext;
			ctx.save();
			this._prepContext(ctx);
		}
		var lineHeight = this.lineHeight||this.getMeasuredLineHeight();
		
		var maxW = 0, count = 0;
		var hardLines = String(this.text).split(/(?:\r\n|\r|\n)/);
		for (var i=0, l=hardLines.length; i<l; i++) {
			var str = hardLines[i];
			var w = null;
			
			if (this.lineWidth != null && (w = ctx.measureText(str).width) > this.lineWidth) {
				// text wrapping:
				// hanyeah 实现中文换行
				var words0 ;
				var words ;
				if((/[\u4e00-\u9fa5]+/).test(str)){ //含有中文
					words0=str.split(/(\s)/);
					words=[];
					for(var hi=0;hi<words0.length;hi++){ 
						var hs="";
						for(var hj=0;hj<words0[hi].length;hj++){ 
							var hjs=words0[hi][hj];
							if(hjs.charCodeAt(0)>255){ 
								if(hs!=""){ 
									words.push(hs);
								}
								words.push(hjs);
								hs="";
							}
							else{ 
								hs+=hjs;
							}
						}
						if(hs!=""){ 
							words.push(hs);
						}
					}
				}
				else{ 
					words = str.split(/(\s)/);
				}
				str = words[0];
				w = ctx.measureText(str).width;
				
				for (var j=1, jl=words.length; j<jl; j+=1) {
					// Line needs to wrap:
					var wordW = ctx.measureText(words[j]).width;
					if (w + wordW > this.lineWidth) {
						if(this.autoSize||((count+1)*lineHeight<=this.maxHeight)){ 
							if (paint) { this._drawTextLine(ctx, str, count*lineHeight); }
						}
						if (lines) { lines.push(str); }
						if (w > maxW) { maxW = w; }
						str = words[j];
						w = ctx.measureText(str).width;
						count++;
					} else {
						str += words[j];
						w += wordW;
					}
				}
			}
			//end hanyeah 实现中文换行
			
			if(this.autoSize||((count+1)*lineHeight<=this.maxHeight)){ 
				if (paint) { this._drawTextLine(ctx, str, count*lineHeight); }
			}
			if (lines) { lines.push(str); }
			if (o && w == null) { w = ctx.measureText(str).width; }
			if (w > maxW) { maxW = w; }
			count++;
		}
		
		if (o) {
			o.width = maxW;
			o.height = count*lineHeight;
		}
		if (!paint) { ctx.restore(); }
		return o;
	};

js打包下载

2016年6月14日 | 发布:hanyeah | 分类:createjs | 评论:0

发表留言: