25
2015
11

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



在线演示

« 上一篇下一篇 »

相关文章:

使用Typescript开发基于createjs的项目  (2016-8-25 9:54:40)

createjs中文API  (2016-8-18 8:45:24)

pixi和createjs效率对比  (2016-8-2 9:45:21)

createjs中stage.mouseX的bug  (2016-7-12 9:14:44)

createjs启用touch事件  (2016-7-12 9:7:5)

createjs指定文本最大高度  (2016-6-14 10:0:38)

如何使用Createjs来编写HTML5游戏(转)  (2016-2-3 13:57:38)

(十二)createjs游戏-围住神经猫  (2015-11-18 14:7:20)

(十一)createjs游戏-游戏框架  (2015-11-18 11:16:31)

createjs中Text中文不换行的问题  (2015-5-12 16:29:49)

评论列表:

1.kongge  2016/2/21 21:46:30 回复该留言
function txt_fmt(s, opt){
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;
}

这样就可以不修改源代码了
.hanyeah  2016/2/24 9:59:25 回复该留言
ext(cfg.ctx, opt, true);不知道这句是什么意思。
我看function txt_fmt(s, opt)的大概意思是:自己对字符串进行处理逐个读取字符,进行分行,返回分行后的字符串。不知道理解的对不对。

简单的这样做可以,但是存在两个问题:
1、中英文混排的情况,英文单词中间不换行,这种方法不能处理;
2、字符串中本身就有"\n",也没有考虑进去。

基本思路都是一样的,要适应的情况越多,代码也就越复杂。
.KONG  2016/11/11 10:42:44 回复该留言
ext(cfg.ctx, opt, true); 想请教一下这是什么意思?
.hanyeah  2016/12/9 14:43:32 回复该留言
我也不知道。是不是自己定义的方法,或者其他库里的方法。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。