FabricJS iText Width And Height - fabricjs

Question

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.

Answer 1

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,
});
I Hope it helps , you can modify initDimensions as per your requirement , you can also see other methods in fabric's documemtation.