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

我正在使用以下函数在 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），这样我就可以看到所有显示的文本。请帮助我。谢谢。

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 回答