createjs中Text中文不换行的问题(2)
之前就提到过createjs中Text中文不换行的问题，之前的解决方法是在中文之间加空格。由于项目中要用到，加空格的方法不合适，所以自己改了一下源码。
修改了easeljs中的p._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 (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 (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;
};
留言列表:
cfg.ctx.save();
ext(cfg.ctx, opt, true);
var tmp = '';
for(var i = 1; i < s.length; i++){
if(cfg.ctx.measureText(s.substr(0, i)).width > opt.lineWidth){
tmp += s.substr(0, i - 1) + '\n';
s = s.substr(i - 1);
i = 1;
}
}
cfg.ctx.restore();
return tmp;
}
这样就可以不修改源代码了
我看function txt_fmt(s, opt)的大概意思是：自己对字符串进行处理逐个读取字符，进行分行，返回分行后的字符串。不知道理解的对不对。
简单的这样做可以，但是存在两个问题：
1、中英文混排的情况，英文单词中间不换行，这种方法不能处理；
2、字符串中本身就有"\n"，也没有考虑进去。
基本思路都是一样的，要适应的情况越多，代码也就越复杂。