LoginSignup
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-01-15

概要

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)は入れないというルールを決める
・テキストオブジェクトの横幅を長めに設定しておく
基本的には、文章中にスペースは使いたくなることが多いと思うので、
テキストオブジェクトの横幅を大きめにとっておく対策がいいかと思われる。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0