检索存储在数组中的文本行并将它们显示在带有换行符的画布上？

Question

下面是一个数组，它的元素存储了一些长文本行。

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"],
]; 

我正在使用以下函数在 Canvas 上显示元素：

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），以便我可以看到所有显示的文本。请帮助我。谢谢。

Answer 1

您需要一个自动换行功能，将您的文本分成合适长度的行。关于如何做到这一点还有其他关于 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，如果你想用连字符分隔长词（可选）

然后它将返回一个字符串数组，每个字符串都将分别放入所需的空间。