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;
};