TextFieldから文字列が溢れたときに「…」ってするやつのasを少し高速化

TextFieldから文字列がはみ出した時の処理 – blog.nium.jpを読んでいて、高速化できそうだと思ったのでほんの少しいじくりました。

ソースだけ必要な人もいると思うのでいきなりソース！適当なクラスのstaticにでも置いてください。

public static function trimmingText(textField:TextField, endText:String = "...", defaultFontSize:Number = 12):void
{
	textField.wordWrap = false;
	if (textField.maxScrollH <= 0)
		return;
	textField.appendText(endText);
	var text:String = textField.text;

	//ループの回数を減らす
	if (textField.maxScrollH > defaultFontSize * 1.5);
		textField.text = text.slice(0, text.length - endText.length - 1 - Math.ceil(textField.maxScrollH / defaultFontSize)) + endText;
	while (textField.maxScrollH > 0)
	{
		text = textField.text;
		textField.text = text.slice(0, text.length - endText.length - 1) + endText;
	}
}

//こうやって使う
var unko_txt:TextField = addChild(new TextField()) as TextField;
unko_txt.width = 100;
unko_txt.autoSize = TextFieldAutoSize.LEFT;
unko_txt.text = "君、ウンコくさいね。すごく臭うからしたよね？ね？ね？君が好き。"
Hogehoge.trimmingText(unko_txt);

本家でのソースの流れ

本題に入る前に、本家ではどういう処理をしてるかを少し説明します。

1. 水平スクロールがあれば
2. テキストフィールドの最後に”…”をつける
3. 水平スクロールがなくなるまで↓をループする
4. 1文字ずつ削除していく

以下高速化をした点

テキストをトリミングする方法を配列じゃなくて、Stringをいじくる方法に変えた

配列はnewして、中身を入れるときがずいぶん重いらしいので、普通のStringをいじくる方法にしてみた。5～10%高速化。

//配列を作ってspliceして、joinするという、配列生成+操作が重そうだったので
//var words:Array = textField.text.split( "" );
//words.splice( words.length - 4, 1);
//textField.text = words.join( "" );
 textField.text = text.slice(0, text.length - endText.length - 1) + endText;

whileループの回数を減らすために、if分をひとつ挟んで、がっつり削除する

1文字ずつ削除するのがもったいない気がするので、ある程度がっつり削除する方向にしてみた。文字数にもよるけれど、80%高速化

 if (textField.maxScrollH > defaultFontSize * 1.5);
 	textField.text = text.slice(0, text.length - endText.length - 1 - Math.ceil(textField.maxScrollH / defaultFontSize)) + endText;

whileループ前に一枚かませます。あふれた文字数をフォントサイズから割り出してがっつり削除します。半角文字などが大量にあると一発では消えませんが、それでもかなりの量の文字を一気に消せます。

図にするとこんな感じです。

（textField.getTextFormat().sizeからフォントサイズを取得できますが、ここでいちいち取得してると重くなるので引数にしています）

結果 45ms → 5ms

計測方法は

• 以下の文章が入ったTextFieldを5つ用意してまわしました。

  □□□□■□□□□1□□□□■□□□□2□□□□■□□□□3□□□□■□□□□4□□□□■□□□□5□□□□■□□□□6□□□□■□□□□7□□□□■□□□□8□□□□■□□□□9□□□□■□□□□10

• TextFieldのwidthは200にしました。

for文で10万回まわしたとかじゃないですよ。日常的に使う場面っぽくしてみました。

ちっさいところとは言えど、ループ回数が多いのと、描画に関わるところなので若干の高速化ができました。