Fabric.js 的文本框不换行
Posted
技术标签:
【中文标题】Fabric.js 的文本框不换行【英文标题】:Textbox of Fabric.js does not wrap a long word 【发布时间】:2016-10-17 21:56:57 【问题描述】:我正在使用Fabric.js
的Textbox
。我给了一个固定的宽度。但是,如果用户键入一个没有任何空格的长单词,超过了给定的文本框宽度,则它不会换行。
有什么办法吗?
【问题讨论】:
【参考方案1】:是的,有一个您可能喜欢或不喜欢分词的解决方案:
覆盖结构默认的换行函数:
fabric.Textbox.prototype._wrapLine = function(ctx, text, lineIndex)
var lineWidth = 0,
lines = [],
line = '',
words = text.split(' '),
word = '',
letter = '',
offset = 0,
infix = ' ',
wordWidth = 0,
infixWidth = 0,
letterWidth = 0,
largestWordWidth = 0;
for (var i = 0; i < words.length; i++)
word = words[i];
wordWidth = this._measureText(ctx, word, lineIndex, offset);
lineWidth += infixWidth;
// Break Words if wordWidth is greater than textbox width
if (this.breakWords && wordWidth > this.width)
line += infix;
var wordLetters = word.split('');
while (wordLetters.length)
letterWidth = this._getWidthOfChar(ctx, wordLetters[0], lineIndex, offset);
if (lineWidth + letterWidth > this.width)
lines.push(line);
line = '';
lineWidth = 0;
line += wordLetters.shift();
offset++;
lineWidth += letterWidth;
word = '';
else
lineWidth += wordWidth;
if (lineWidth >= this.width && line !== '')
lines.push(line);
line = '';
lineWidth = wordWidth;
if (line !== '' || i === 1)
line += infix;
line += word;
offset += word.length;
infixWidth = this._measureText(ctx, infix, lineIndex, offset);
offset++;
// keep track of largest word
if (wordWidth > largestWordWidth && !this.breakWords)
largestWordWidth = wordWidth;
i && lines.push(line);
if (largestWordWidth > this.dynamicMinWidth)
this.dynamicMinWidth = largestWordWidth;
return lines;
;
用法:
var breakingTextbox = new fabric.Textbox(longText,
width: 200,
breakWords: true
);
【讨论】:
你是我的救星……非常感谢。老实说,我很难理解fabric.js
文件中的_wrapLine
代码,你是如何想出这样的解决方案的人?我是否必须通过这个 JS 的所有 API 才能得出我自己的代码?
我有这个解决方案是因为有人问我。 fabricJs 使用起来比较简单,你问的第二个问题是什么意思?
@AndreaBogazzi 此代码在 Fabric 2.0.2 中不起作用。有什么改变吗?谢谢
为 1.6 编写了 2 年的代码,是的,可能已经过时了,但应该不难适应它。
@AndreaBogazzi 在过去的几天里,我设法以某种方式对其进行了调整-但文本光标未显示在文本末尾。有没有办法更新光标的位置?查看下图:link【参考方案2】:
对于 Fabric.js 3.0.0+,您可以使用 splitByGrapheme 属性。
在文本框上,将其设置为 true:
const letterBreakingTextBox = new fabric.Textbox(yourLongText,
width: 200,
textAlign: 'left', // you can use specify the text align
splitByGrapheme: true
);
【讨论】:
当前接受的答案已包含在 fabric.js 内部。只需使用splitByGrapheme
会有所帮助,谢谢。【参考方案3】:
适用于面料 2.0+ 请参阅Fabric.js 2.0 breakWords Implementation 了解无空格的自动换行长字的实现。
【讨论】:
以上是关于Fabric.js 的文本框不换行的主要内容,如果未能解决你的问题,请参考以下文章