FabricJS iText宽度和高度 [英] FabricJS iText Width And Height

问题描述

是否可以设置iText对象的宽度和高度?创建对象时，如果设置宽度和高度，则不会执行任何操作.我需要的是将边框在画布上固定为可编辑区域的固定大小，我已经扩展了iText类以允许进行单个字符编辑，但是我似乎无法解决如何将框的大小设置为固定大小，并允许在其中进行内容编辑.请记住，文本框无法移动或缩放，它是静态的.

Is there a way to set the width and height of an iText object? When creating the object if you set width and height it doesn't do anything. What I am after is the bounding box to be a fixed size on the canvas as an editable region, I have already extended the iText class to allow for individual character editing but I can't seem to work out how to size the box as a fixed size and allow content editing inside of it. Bare in mind that the text box can't be moved or scaled, it's static.

推荐答案

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

It's Too late for answer but other may be looking for answer. First of all You can use TextBox class of fabricjs if you want to give fixed width & height to Text field. It is Subclass of Itext. But the problem with TextBox was it's text wrap. So If you don't want to use TextBox but still want to have fixed width and height with Itext then following extended subclass can help you. I have overridden the initDimensions method .

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

然后您可以按以下方式使用

Then you can use like below

   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的文档中看到其他方法.

I Hope it helps , you can modify initDimensions as per your requirement , you can also see other methods in fabric's documemtation.

这篇关于FabricJS iText宽度和高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！