createJSのテキストとスペースについて

#概要
createJSのテキストにて

var textObj = _lib.text;
var sentence = "テスト用の文章";
textObj.text = sentence;

上記のように、テキストを表示させる場合に、
半角スペース、全角スペースを入れると
文章の途中で勝手に改行されてしまうことがある
上記の解決方法について記載する

#原因
##drawTextの仕様
テキストへの文字表示はcreatejs内のdrawText関数で行われている

drawText (createJS)

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:
                var words = str.split(/(\s)/);
                str = words[0];
                w = ctx.measureText(str).width;
                 
                for (var j=1, jl=words.length; j<jl; j+=2) {
                    // Line needs to wrap:
                    var wordW = ctx.measureText(words[j] + words[j+1]).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+1];
                        w = ctx.measureText(str).width;
                        count++;
                    } else {
                        str += words[j] + words[j+1];
                        w += wordW;
                    }
                }
            }
             
            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;
    };

上記コードの中の
テキストオブジェクトの幅(lineWidth)と文字の長さを比較して

w = ctx.measureText(str).width; //今描画している文字の長さ
var wordW = ctx.measureText(words[j] + words[j+1]).width;　//次に描画する単語と次の次に描画する単語を合わせた長さ
w + wordW > this.lineWidth　//2つ先の単語まで描画したときにテキストオブジェクトの幅を超えてしまうかどうか

いまから描画しようとしている単語の次の単語を描画した場合に、テキストオブジェクトの横幅を超えてしまうようであれば今回の描画後に改行をする仕様になっている

if (w + wordW > this.lineWidth) {
    this._drawTextLine(ctx, str, count*lineHeight); //改行は、テキストを描画する高さを変更する形で実装されている？
    count++; //超えてしまったら、改行する
}

##単語の定義
createJSでは単語を区切るのにスペースが使用されている

var words = str.split(/(\s)/);
str = words[i];

#対策
対策としては主に2つある
・表示する文章データの中にはスペース(\s)は入れないというルールを決める
・テキストオブジェクトの横幅を長めに設定しておく
基本的には、文章中にスペースは使いたくなることが多いと思うので、
テキストオブジェクトの横幅を大きめにとっておく対策がいいかと思われる。