Question

我尝试使用IText或Textbox对象在结构画布上创建文本输入。这似乎在使用Fabric的http://impretty.me上很好地完成，但我似乎无法复制他们在这里所做的事情。我希望能够在IText上设置最大宽度/最大字符数，或者将Textbox对象限制为单行。

我的问题是在IText上设置宽度是无效的，即使width参数适用于Textbox，我也需要将文本保持为单行。如http://impretty.me所示，缩放文本会很好但不是必需的。任何帮助将不胜感激。

文本框的代码以及此时我已经制定的互动如下。

const text = new fabric.IText('Type Your Message', {
  originY: 'center',
  hoverCursor: 'text',
  left: 210,
  top: 825,
  width: 300,
  fontFamily: 'Permanent Marker',
  fontSize: 50,
  hasBorders: false,
  hasControls: false,
  lockMovementX: true,
  lockMovementY: true,
  id: 'text'
})
canvas.add(text)

text.on('changed', function (options) {
  if (this.width >= 635) {
    const newText = this.text.slice(0, -1)
    this.text = newText
    this.hiddenTextarea.value = newText
    console.log(this)
  }
})

Answer 1

you can resize down the text to fit inside the bounding box

sizeDownTextNew = function(canvasObj, limit_height, limit_width )
{

    if(typeof (canvasObj) == "undefined" || canvasObj == null)
        return;
    var counter = 250; //Maximum of 250iterations to size down
    var initial_height = limit_height;
    var max = canvasObj.get('fontSize');
    var min = 6; //This is our minimum size
    var foundmin=0; //Flag if minimum is met
    var ratio = max;
    //Now reduce the size of actual text font size property
    while(canvasObj.height+2<canvasObj._getTextHeight()) //While the height of text is larger then actual text, try reducing the lineHeight
    {

        var fontSize = parseFloat(canvasObj.get('fontSize'));

        fontSize=fontSize - fontSize/max; //reduce the size with a set ratio

        if(fontSize > min) //If main font is greater then min font, we will now reduce
        {

            canvasObj.set('fontSize', fontSize);
            canvasObj.height = initial_height

        canvasObj.canvas.renderAll();
        canvasObj.height = initial_height;
        canvasObj.setCoords();
        canvasObj.canvas.renderAll();

        if(counter == 0) //Failsafe to exit the while loop if no condition is met
            break;
    }


    counter = 300;
    while(limit_width<canvasObj._getTextWidth()) //While the width of text is larger then actual text, try reducing it
    {
        var fontSize = parseFloat(canvasObj.get('fontSize'));

        fontSize=fontSize - fontSize/ratio; //reduce the size with a set ratio

            canvasObj.setCoords();
            canvasObj.canvas.renderAll();

        }
        else
        {
            break;
        }
        canvasObj.width = limit_width;
        counter -- ;
        if(counter == 0)
        {

            break;
        }

    }


}

and then call this function like

text.on('changed', function (options) {

sizeDownTextNew(this,500,60); })

Answer 2

要限制fabric js 2+版的文本，我们需要如下重写onInput函数

onInput：函数（e）{

if(this.width > this.maxWidth) {
    return;
}
if((this._textLines.length) > this.maxLines) {
    return;
}

// Call parent class method
this.callSuper('onInput', e);

}

注意：maxWidth-限制宽度和maxLines-限制文本框中的高度/线条

限制IText或Textbox上的文本输入

2 个答案: