Textオブジェクトに示すテキストは、Text.textプロパティで与えられます。その文字列に改行のエスケープ文字が入っていなければ、デフォルトでは1行で表されます。Textオブジェクトの幅を定めたい場合、英文と邦文ではやり方が異なります。

01 英文が与えられたTextオブジェクトの幅をText.lineWidthプロパティで定める

TextクラスにはText.lineWidthプロパティが備わっています。つぎのコードのようにピクセル値を与えると、Textオブジェクトの最大幅が定まり、その幅を超えるテキストが改行されます(図001)。デフォルト値はnullで、改行は入りません。

var my_txt = new createjs.Text(); my_txt.lineWidth = 200; my_txt.text = "lineWidth\rIndicates the maximum width for a line of text before it is wrapped to multiple lines. If null, the text will not be wrapped."

図001■Text.lineWidthプロパティのピクセル幅を超えるテキストは改行される

02 邦文の文字列には予め改行のエスケープ文字を加える

Text.lineWidthプロパティは、日本語の文に定めても、改行が加わりません。もちろん、改行のエスケープ文字が文字列に予め入れてあれば、改行されます。

my_txt.lineWidth = 200;
my_txt.text = "lineWidth\rテキスト1行の最大幅を定めて改行します。nullが与えられるとテキストは改行されません。";

図002■邦文ではText.lineWidthプロパティによる改行がされない

これは、Text.lineWidthプロパティによる改行が、英文の前提で、テキストの空白文字を頼りに行われているためです^[*1]。つまり、テキストすべてが長いひとつの単語とみなされていることになります。したがって、Text.textプロパティに与える文字列を、予めエスケープ文字で区切っておくしかなさそうです。そのための簡単な関数(breakLines())を、以下のコード001のように定めました。文字列と区切る文字数を引数に受取り、改行で区切られたテキストにして返します。

my_txt.text = breakLines("lineWidth\rテキスト1行の最大幅を定めて改行します。nullが与えられるとテキストは改行されません。", 20);

呼出された関数(breakLines())は、まず受取ったテキストを改行のエスケープ文字で配列に分けます。区切り文字はString.split()メソッドに正規表現で複数与えました(第3〜4行目)。つぎに、エレメントの文字列をforループで1行ごとに別の関数(breakSingleLine())に渡して、与えられた文字数で改行区切りにします(第6〜8行目)。そのうえで、改めて配列エレメントをArray.join()メソッドにより改行でつなげて返しています。

1行のテキストを改行区切りする関数(breakSingleLine())は、whileループで与えられた文字数ごとにエスケープ文字を差込んでいるだけです(第16〜29行目)。ただし、句読点の禁則だけ扱えるようにしました(第20〜22行目)。これで、テキストを予め定められた文字数ごとに改行で区切れます(図003)。

図003■邦文のテキストを予め決めた文字数で改行区切りしてTextオブジェクトに与える

前掲コード001は、ごく簡単な仕様にしました。とくに、英単語が混じった場合などは、さらに細かな扱いが求められます。