Fabric.js 的文本框不换行

Posted

技术标签:

【中文标题】Fabric.js 的文本框不换行【英文标题】:Textbox of Fabric.js does not wrap a long word 【发布时间】:2016-10-17 21:56:57 【问题描述】:

我正在使用Fabric.jsTextbox。我给了一个固定的宽度。但是,如果用户键入一个没有任何空格的长单词,超过了给定的文本框宽度,则它不会换行。

有什么办法吗?

【问题讨论】:

【参考方案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 的文本框不换行的主要内容,如果未能解决你的问题,请参考以下文章

如何将 Cmder 设置为不换行文本输出

单(多)行文本溢出显示省略号...

在非换行文本区域上显示行长指南

网格视图验证

使用 fabric.js 在画布上绘制文本

gridview 验证中的文本框