11

HTML5 Canvas でワードラップしようとしていますが、苦労しています!

複数行のワード ラップ テキストを管理する TextTyper オブジェクトを作成しました。

私が抱えている問題は、無限ループが発生していることです!

純粋な JavaScript (jQuery なし) と HTML5 Canvas を使用するソリューションが必要です。

問題を解決し、さまざまな戦略をテストするのに役立つ JSFiddle を作成しました: http://jsfiddle.net/Jamesking56/eECar/

これまでの私の TextTyper オブジェクトは次のとおりです。

function TextTyper(text, x, y, font, colour) 
{
    this.text = text || "";
    this.x = x || 20;
    this.y = y || 20;
    this.font = font || false;
    this.colour = colour || [0, 0, 0];
    this.lines = 0;

    // Calculate and draw the lines
    this.draw = function () 
    {
        canvas.width = canvas.width;

        var maxWidth = (canvas.width - 40);

        var words = this.text.split(' ');
        var line = [words[0]]; //begin with a single word

        for (var i = 1; i < words.length; i++) 
        {
            while (ctx.measureText(line.join(' ')) < maxWidth && i < words.length - 1) 
            {
                line.push(words[i++]);
            }

            if (i < words.length - 1) 
            { 
                //Loop ended because line became too wide
                line.pop(); //Remove last word
                i--; //Take one step back
            }
            this.lines++;
        }
    }
}

何か案は？

4

1 に答える 1

8

さて、これは私が HTML5 ゲームに使用したものです: http://jsfiddle.net/eECar/16/

while ( text.length ) {
    for( i=text.length; ctx.measureText(text.substr(0,i)).width > max_width; i-- );

    result = text.substr(0,i);

    if ( i !== text.length )
        for( j=0; result.indexOf(" ",j) !== -1; j=result.indexOf(" ",j)+1 );

    lines.push( result.substr(0, j|| result.length) );
    width = Math.max( width, ctx.measureText(lines[ lines.length-1 ]).width );
    text  = text.substr( lines[ lines.length-1 ].length, text.length );
}

それが役立つことを願っています。

于 2013-04-25T17:43:27.930 に答える