Question

我将使用等宽字体在画布上进行文本换行，我需要分割超过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.

提醒：在画布上只显示前五行文字。我将使用等宽字体，所有字母和空格宽度相同，是否更容易处理？输入的Thx。

更新：我设法让长字符串显示在应有的位置，但该技术还会拆分不超过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是我收集的每行的字符长度。

我以为我已经解决了（拉丁语让我大笑起来）但是经过仔细审查后，我意识到每行小于最大字符数的单词也会在行尾分割。有没有分裂的任何方法来保存这些单词？

Answer 1

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

然后你可以按照你想要的方式对待那些特殊情况。

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

var words = text.split(' ');

然后你可以抓住你的“AAA”＆amp; “BBB”特殊的单词并特别处理它们：

if(words[i]=="AAA" || words[i]=="BBB"){ 
    // handle these special words
}else{
    // handle these non-special words
}

HTML5画布|文本换行时超过maxwidth的单词不带连字符的单词分隔符

1 个答案: