fabric.js文本框省略号

svujldwt  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(260)

我需要了解如何在fabricjs textbox对象中添加省略号和块文本框大小。我在网上搜索了一些有用的材料,我找到了一把小提琴,它的效果和我想达到的效果非常相似。问题是在不同的结构版本中,fiddle适用于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)

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题