FABRICJS TEXT（调整边界框大小）答案

【问题标题】：FABRICJS TEXT ( Resize bounding box )FABRICJS TEXT（调整边界框大小）
【发布时间】：2020-08-21 10:07:10
【问题描述】：

我需要一个自定义文本框，您可以在不拉伸字体的情况下调整边界框的大小。

基于 fabric.Textbox 类创建了一个自定义结构类。有一些在自定义类中调用父类方法并覆盖它们的经验。

    fabric['CustomText'] = fabric.util.createClass(fabric.Textbox, {
      type: 'custom-text',
      initialize: function(element, options) {
        this.callSuper('initialize', element, options)
        options && this.set('id', options.id) && this.set('clipTo', options.clipTo)
      },
      insertChars: function(chars) {
        if (this.maxWidth) {
          const textWidthUnderCursor = this._getLineWidth(this.ctx, this.get2DCursorLocation().lineIndex)
          if (textWidthUnderCursor + this.ctx.measureText(chars).width > this.maxWidth) {
            chars = '\n' + chars
          }
        }

        if (this.maxLines) {
          const newLinesLength = this._wrapText(this.ctx, this.text + chars).length
          if (newLinesLength > this.maxLines) {
            return
          }
        }

        // Call parent class method
        this.callSuper('insertChars', chars)
      },
      toObject: function() {
        return fabric.util.object.extend(this.callSuper('toObject'), { id: this.id, clipTo: this.clipTo })
      },
    })

我需要能够

在不改变字体比例的情况下拉伸 TextBox 的边界框。
能够在文本框中的特定字符索引处拖放文本。

【问题讨论】：

这里有一个例子：fabricjs.com/kitchensink。转到“简单”选项卡，您有“添加文本框”
谢谢你，但试着把它拉下来。它拉伸字体。另外——如果你对角拉伸，字体会拉伸。固定字体大小似乎不起作用。也许超级边界框类？

标签： fabricjs

【解决方案1】：

您需要设置元素的控件可见性以防止垂直调整大小。文本框将根据内容调整其高度，但通过以下设置，您仍然可以控制宽度。

let textbox = new fabric.Textbox('Lorum ipsum dolor sit amet', {
  left: 50,
  top: 50,
  width: 150,
  fontSize: 20
});

textbox.setControlsVisibility({
  tl: false,
  ml: true,
  bl: false,
  mb: false,
  br: false,
  mr: true,
  tr: false,
  mt: false
});

【讨论】：