Fabric.js - 帶有免費矩形邊界框的文本，如 Google 幻燈片

Question

我正在使用 Fabric.js 制作繪圖編輯器。 要求之一是創建靈活的文本框組件（如 Goole Slides 或 Power Point），其邊界框可以在不影響文本大小和其他文本控件（如縮放、重新定位）的情況下進行調整……目前，fabric.js 提供了fabric.Text不足以完成此任務。 所以我正在使用fabric.Group但我在選擇問題上很fabric.Group 。 我無法選擇組的子對象。 我該如何解決這個問題。 歡迎任何信息

這是我想要實現的：

這就是我現在擁有的原始fabric.Text對象

這就是我用fabric.Group實現的

這是我用於文本框的課程

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;

Answer 1

如果您想要靈活的寬度和高度，您可以使用 Fabric 的 TextBox。 但我認為您還需要文本周圍的邊框，因為該分組是一個不錯的選擇，但您必須根據您的文本調整 Rect 的寬度和高度。 為此，您需要覆蓋 Textbox 的 onKeyDown 方法並添加自己的方法來更改 Rect 的寬度和高度。 當然，您也可以在 text:changed 事件上調用該函數。 我做了同樣的，我不能分享完整的代碼，但這是提示

this.LimitedTextbox = fabric.util.createClass(fabric.IText, {
       //you can ignore it , here i setting fixed width to Itext
        initDimensions: function() {
            this.isEditing && this.initDelayedCursor();
            this.clearContextTop();
            if (this.__skipDimension) {
                return;
            }
            this._splitText();
            this._clearCache();
            if (this.path) {
            this.width = this.path.width;
            this.height = this.path.height;
            }
            else {
                let width = this.calcTextWidth();
                if(width>this.maxWidth){
                    this.width = width;
                }else{
                    this.width = this.maxWidth;
                }
                this.height = this.calcTextHeight();    
            }
            if (this.textAlign.indexOf('justify') !== -1) {
            this.enlargeSpaces();
            }
            this.saveState({ propertySet: '_dimensionAffectingProps' });
        },
        onKeyDown:function(e){
            //Can be Ignored , I wanted my textbox to have limited lines only
            if ((e.keyCode == 13 && this._textLines.length>=this.maxLines) || 
            (e.keyCode == 9 || e.keyCode == 27)) {
                this.exitEditing();
                self.lastSelected = undefined;
            }else{
                this.callSuper('onKeyDown',e);
                let maxLine = Math.max(...this.__lineWidths); 
                //This is What you need , A function to change border width.
                self.changeBorderWidth(this.toObject().groupId, this, { iWidth: this.width, iHeight: this.height,maxLine:maxLine,id:this.toObject().id },false,this.toObject().customType==='stamp_input');
                if(this.dynamicMinWidth>this.maxWidth){
                    this.width = this.dynamicMinWidth;
                }
            }
                
            
        },
    });

編輯：向 IText 或文本框添加邊框https://stackoverflow.com/a/67055302/11036872