类似css溢出的fabricjs中对象的属性是什么：隐藏答案

【问题标题】：What is the property of object in fabricjs similar to css's overflow : hidden类似css溢出的fabricjs中对象的属性是什么：隐藏
【发布时间】：2018-05-04 08:08:24
【问题描述】：

我正在尝试使用织物 js 制作固定大小的文本对象。所以我尝试设置文本对象的左侧、顶部、宽度和高度，但输入文本后宽度和高度发生了变化。我想隐藏所有溢出部分。

  var canvas = new fabric.Canvas('c');
    canvas.setHeight(300);
        canvas.setWidth(500);

canvas.add(new fabric.Text('Tap and Type', { 
      left: 50,
      top: 100,
      width: 300,
      height: 200,
      fontFamily: 'arial black',
      fill: '#333',
      fontSize: 50
}));

有没有人用fabric js构建了类似于html textarea的文本对象？我试图在谷歌上找到但没有找到。使用织物文本对象属性可以轻松完成吗？

Jsfiddle：https://jsfiddle.net/Lvfpq57h/117/

【问题讨论】：

如果隐藏，则无法选择隐藏的文字。
@Durga，在我的情况下不需要选择隐藏文本
您不想将文本换行到下一行吧？

标签： javascript css fabricjs

【解决方案1】：

只需使用Textbox 类而不是Text。

它默认是可编辑的，当不适合宽度时会自动换行。（它不会将其隐藏为 overflow:hidden，而是作为 textarea 在文本换行处工作）

canvas.add(new fabric.Text('Tap and Type', {

https://jsfiddle.net/gaby/Lvfpq57h/118/

【讨论】：

谢谢，但是你的小提琴在打字后改变了高度和宽度，我想在打字后隐藏溢出的文字

【解决方案2】：

我认为您的问题并没有作为文本对象的简单属性来解决。请参阅参考问题。 https://github.com/kangax/fabric.js/issues/187

这里有一些有用的东西。 http://jsfiddle.net/3j352toh/19/

这里重新定义了fabric.Textbox.prototype._wrapLine 以根据需要格式化文本。

代码：

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();

【讨论】：

不鼓励仅链接答案
@junkai，你的链接很有帮助。