Question

有没有办法设置iText对象的宽度和高度？如果设置宽度和高度，则在创建对象时，它不会执行任何操作。我所追求的是在画布上作为可编辑区域的固定大小的边界框，我已经扩展了iText类以允许单独的字符编辑，但我似乎无法弄清楚如何将框大小设置为固定大小并允许在其中进行内容编辑。请记住，文本框不能移动或缩放，它是静态的。

Answer 1

现在回答为时已晚，但其他人可能正在寻找答案。首先，如果您想为 Text 字段提供固定的宽度和高度，您可以使用 fabricjs 的 TextBox 类。它是Itext的子类。但是 TextBox 的问题在于它的文本换行。因此，如果您不想使用 TextBox 但仍希望使用 Itext 具有固定的宽度和高度，那么以下扩展子类可以帮助您。我已经覆盖了 initDimensions 方法。

    this.LimitedTextbox = fabric.util.createClass(fabric.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){
                if (e.keyCode == 13  && this._textLines.length>=this.maxLines) {
                    this.exitEditing();
                }
                this.callSuper('onKeyDown',e);
                let maxLine = Math.max(...this.__lineWidths); 
                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;
                }
            
            },
        });

然后你可以像下面这样使用

   const text = new this.LimitedTextbox(txt, {
                            left: 100,
                            top: 100,
                            fontFamily: "arial",
                            angle: 0,
                            fontSize: 24,
                            fontWeight: "bold",
                            hasControls: true,
                            hoverCursor: "text",
                            width:250,
                            maxWidth: 250,
                            maxLines: 3,
                            hasRotatingPoint: true,
                        });

希望对您有所帮助，您可以根据需要修改initDimensions，您也可以在fabric 的文档中查看其他方法。

FabricJS iText宽度和高度

1 个答案: