hanyeah

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打包下载