javascript - fabric.js 文本框省略号

Question

我需要了解如何在 fabricjs Textbox 对象中添加省略号和阻止文本框大小。我在互联网上搜索了一些有用的材料，我找到了一个小提琴，它具有我想要达到的非常相似的效果。问题出在不同的面料版本中，小提琴适用于 1.6，我需要它在 4.3.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.slice(0,this.cHeight/this.lineHeight/this.fontSize);
};

var _fabric = new fabric.Canvas('breaker');
_fabric.setBackgroundColor('#eee', _fabric.renderAll.bind(_fabric));

var curWidth = document.getElementById('breaker').width;
var curHeight = document.getElementById('breaker').height;
var longText="ABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEF";
var breakingTextbox = new fabric.Textbox(longText,
    {
        width: curWidth / 2,
        cHeight: curHeight/2,
        left: curWidth / 2,
        top: 180,
        fill: '#333',
        cursorWidth: 0.5,
        originX: 'center',
        originY: 'top',
        textAlign: 'center',
        breakWords: true
});
_fabric.add(breakingTextbox).setActiveObject(breakingTextbox);
breakingTextbox.enterEditing();

• http://jsfiddle.net/3j352toh/19/ - 我想要达到的效果（fabricjs 1.6）
• https://jsfiddle.net/tjablonski/gru9dh13/2/ - 无需修改即可清洁小提琴（fabricjs 4.3.1）

标签： javascriptcanvasoverflowfabricjs