Fabric.js - 像Google slides一样带有自由矩形边界框的文本。

Question

我正在使用Fabric.js制作一个绘图编辑器，其中一个需求是创建灵活的文本框组件（像Goole Slides或Power Point一样），它的边界框可以在不影响文本大小和其他文本控件（如缩放、重定位）的情况下进行调整。其中一个要求是创建灵活的文本框组件（像Goole Slides或Power Point），其边界框可以调整，而不影响文本大小和其他文本控制，如缩放，重新定位。目前，fabric.js所提供的 fabric.Text 是不足以完成这个任务的。所以我使用 fabric.Group 但我在选择问题上有堆栈。我不能选择组的子对象。我怎么能去解决这个问题。任何信息是欢迎的

这就是我想要达到的目标。

这就是我现在拥有的生鲜 fabric.Text 对象

这就是我用 fabric.Group

这是我的类，它是为Textbox准备的。

class Text extends fabric.Group {
  constructor(options) {
    super([], Object.assign(options));
    this.class = 'textbox';

    this.init();
  }

  init() {
    const left = this.left;
    const top = this.top;
    const width = this.width || 100;
    const height = this.height || 40;

    this.rect = new fabric.Rect({
      left,
      top,
      width,
      height,
      fill: 'rgba(0,0,0,0)',
      stroke: this.stroke,
      type: 'rect',
      originX: 'left',
      originY: 'top',
      strokeWidth: this.strokeWidth
    });

    this.text = new fabric.IText(this.text, {
      left: left + 20,
      top: top + 12,
      fontSize: this.fontSize,
      fontFamily: this.fontFamily,
      fontColor: this.fontColor,
      selectable: true
    });
    this.text.setCoords();

    this.text.setControlsVisibility({
      br: false, // middle top disable
      bl: false, // midle bottom
      tl: false, // middle left
      tr: false, // I think you get it,
      mb: false,
      ml: false,
      mt: false,
      mr: false,
      mtr: false
    });

    this.addWithUpdate(this.rect);
    this.addWithUpdate(this.text);
  }

  toObject() {
    const obj = super.toObject();
    return Object.assign(obj, {
      class: this.class
    });
  }
}

export default Text;