2

以下は、長いテキスト行を格納する要素を含む配列です。

var fcontent = [
["Definition: The term computer is obtained from the word compute. A computer is an electronic device that inputs (takes in) facts (known as data), and then processes (does something to or with) it. Afterwards it outputs, or displays, the results for you to see. Data is all kinds of facts, including, pictures, letters, numbers, sounds, etc."],

["Moreover: A computer is a system that is made up of a number of components. Next is a diagram of a computer system with some of its components"],
];

次の関数を使用してキャンバスに要素を表示しています。

firstLevelContent:function()
{
    var startPoint = 48;  $('.gamelayer').hide();
    $('#gamecanvas').show();       
    for (var i=0; i<fcontent.length; i++)
    {
        game.context.strokeRect(1,  25, 637, 385);
        game.context.fillStyle = 'brown';
        game.context.font = 'bold 20px sans-serif';
        game.context.textBaseline = 'bottom';
        game.context.fillText(fcontent[i], 2, startPoint);
        startPoint+=17;
    }
},

しかし、テキストはコードにそのまま表示されます。キャンバスの幅 (640) に合わせて行を分割する方法を見つけて、表示されているすべてのテキストを確認できるようにします。助けてください。ありがとう。

4

1 に答える 1

0

テキストを適切な長さの行に分割するワード ラップ機能が必要です。これを行う方法についてSOには他の提案がありますが、それらのほとんどは、長すぎる単語(つまり、個々の単語が必要な幅よりも長い場合)または空白(つまり、ほとんどが単一の単語間のスペース文字)。私は考えて、これを思いついた：

function wordWrap(text, width, ctx, useHyphen) {
    var words = text.split(/\b(?=\w)/),
        wrappedText = [],
        wordLength = 0,
        fullLength = 0,
        line = "",
        lineLength = 0,
        spacer = useHyphen ? "-" : "",
        spacerLength = ctx.measureText(spacer).width,
        letterLength = 0;

    // make sure width to font size ratio is reasonable
    if (ctx.measureText("M"+spacer).width > width) {return [];}

    // produce lines of text
    for (var i=0, l=words.length; i<l; i++) {

        wordLength = ctx.measureText(words[i].replace(/\s+$/,"")).width;
        fullLength = ctx.measureText(words[i]).width;

        if (lineLength + wordLength < width) {
            line += words[i];
            lineLength += fullLength;
        } else if (wordLength < width) {
            wrappedText.push(line);
            line = words[i];
            lineLength = fullLength;  
        } else {
            // word is too long so needs splitting up

            for (var k=0, lim=words[i].length; k<lim; k++) {

                letterLength = ctx.measureText(words[i][k]).width;

                if (words[i][k+1] && /\S/.test(words[i][k+1])) {

                    if (lineLength + letterLength + spacerLength < width) {
                        line += words[i][k];
                        lineLength += letterLength;
                    } else {
                        if (true || words[i][k+1] && /\s/.test(words[i][k+1])) {line += spacer;}
                        wrappedText.push(line);
                        line = words[i][k];
                        lineLength = letterLength;
                    }

                } else {
                    // last 'letter' in word

                    if (lineLength + letterLength < width) {
                        line += words[i].substr(k);
                        lineLength += ctx.measureText(words[i].substr(k)).width;
                    } else {
                        line += spacer;
                        wrappedText.push(line);
                        line = words[i].substr(k);
                        lineLength = ctx.measureText(words[i].substr(k)).width;
                    }

                    break;

                }


            }

        }
    }

    wrappedText.push(line);

    // strip trailing whitespace from each line
    for (var j=0, len=wrappedText.length; j<len; j++) {
        wrappedText[j] = wrappedText[j].replace(/\s+$/,"");
    }

    return wrappedText;

}

おそらく改善される可能性がありますが、私にとってはうまくいきます：http://jsfiddle.net/cP5Fz/9/

注: 関数を呼び出す前に、使用するフォント サイズを設定する必要がありますwordWrap。

渡す引数については、次のとおりです。

  • text: 折り返したいテキスト
  • width: テキストが収まらなければならない幅
  • ctx: キャンバスのコンテキスト
  • useHyphen:trueハイフンを使用して長い単語を分割する場合に設定します (オプション)

次に、それぞれが必要なスペースに個別に収まる文字列の配列を返します。

于 2013-10-19T16:06:35.170 に答える