0

我将使用等宽字体在画布上进行文本换行，并且我需要拆分超过 maxwidth 的单词（不需要连字符）。我还需要将画布上显示的文本行数限制为 5 行（从第一行开始）。

这个小提琴是我会使用的：http: //jsfiddle.net/eECar/16/

在那个小提琴中，当您应用以下文本时...

todo(ctx, "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda illum tempore nam iure necessitatibus unde! Fugiat, BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni, accusamus, modi doloremque dolores repudiandae expedita consectetur labore veniam minima minus in ab non aperiam ducimus iure repellendus qui cumque perferendis ad molestias porro quae dolorum amet laboriosam saepe omnis esse eum voluptatum. Facere, animi culpa accusantium eligendi voluptatum voluptatem voluptates vitae.", 12, "black");

... B 字符串根据 maxwidth 进行拆分，但在超过该 maxwidth 时创建一个新行，如下所示（在“Fugiat”之后出现一个新行）：

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda
illum tempore nam iure necessitatibus unde! Fugiat,
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni,
accusamus, modi doloremque dolores repudiandae expedita consectetur labore
veniam minima minus in ab non aperiam ducimus iure repellendus qui cumque
perferendis ad molestias porro quae dolorum amet laboriosam saepe omnis esse
eum voluptatum. Facere, animi culpa accusantium eligendi voluptatum
voluptatem voluptates vitae.

我希望 B 字符串看起来像这样：

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA corrupti nemo dolorem assumenda
illum tempore nam iure necessitatibus unde! Fugiat, BBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
BBBBBBBBBBBBBBBBBBBBBquibusdam. Quia, vitae, magni, accusamus, modi
doloremque dolores repudiandae expedita consectetur labore veniam minima
minus in ab non aperiam ducimus iure repellendus qui cumque perferendis ad
molestias porro quae dolorum amet laboriosam saepe omnis esse eum voluptatum.
Facere, animi culpa accusantium eligendi voluptatum voluptatem voluptates
vitae.

提醒：只有前五行文本会显示在画布上。我将使用等宽字体，所有字母和空格的宽度都相同，这样处理起来会更简单吗？谢谢输入。

更新：我设法使长字符串显示在它们应该显示的位置，但该技术也会拆分不超过 maxwidth 的单词，请参阅http://jsfiddle.net/eECar/47/ 在小提琴中，我将字体更改为等宽并且基本上改变了这段代码...

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

..对此：

for( j=0; result.indexOf(" ",j) !== -1; j=result.indexOf(" ",j)+35 );

... +35 是我收集的每行字符长度。

我以为我已经解决了（拉丁语让我大笑），但经过仔细审查，我意识到小于每行最大字符数的单词也会在行尾分开。有什么方法可以完整地保存这些单词而不分裂？

4

1 回答 1

0

尝试将整个文本拆分为单个单词，以便测试您的“特殊”AAA 和 BBB 单词。

然后，您可以按照自己的意愿处理这些特殊情况。

您可以将文本拆分为包含所有单个单词的数组，如下所示：

var words = text.split(' ');

然后你可以抓住你的“AAA”和“BBB”特殊词并像这样特别处理它们：

if(words[i]=="AAA" || words[i]=="BBB"){ 
    // handle these special words
}else{
    // handle these non-special words
}
于 2014-08-28T14:34:20.500 回答