Question

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

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

    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的边框。
能够在文本框中的特定字符索引处拖放文本。

Answer 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
});

FABRICJS TEXT（调整边界框）

1 个答案: