Fabric.js: Text backgroundcolor with paddding

[CrackerakiUA]

When i am adding padding with backgroundColor to an itext all text background get colored, but padding is empty, is possible to add that background to padding also?

[asturur]

No, padding is the distance between object and controls.

[CrackerakiUA]

Any other way to success that?

[asturur]

You can group with a rect, but you will loose editing capability.
You can extend iText class and override the renderBackground method to include padding.

[brijeshb42]

Here is a solution that I implemented -

var TextboxWithPadding = fabric.util.createClass(fabric.Textbox, {
  _renderBackground: function(ctx) {
    if (!this.backgroundColor) {
      return;
    }
    var dim = this._getNonTransformedDimensions();
    ctx.fillStyle = this.backgroundColor;

    ctx.fillRect(
      -dim.x / 2 - this.padding,
      -dim.y / 2 - this.padding,
      dim.x + this.padding * 2,
      dim.y + this.padding * 2
    );
    // if there is background color no other shadows
    // should be casted
    this._removeShadow(ctx);
  }
});

this.left and this.top will also have to be taken into account.
But with new fabric updates, this method will have to be synced with that of fabric.object.

[friday]

I found a more direct approach, by overriding the methods used to get dimensions (moving padding from _calculateCurrentDimensions() to _getNonTransformedDimensions()). It seems to be working better than the suggestion above for making sure the padded background aligns with the controls and scales proportionally.

I left out strokeWidth from the original _getNonTransformedDimensions() calculation, since I don't think it applies to text (at least not in my tests).

fabric.Text.prototype.set({
  _getNonTransformedDimensions() { // Object dimensions
    return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
  },
  _calculateCurrentDimensions() { // Controls dimensions
    return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
  }
});

[rohitgargi]

Hi One query... @friday
While creating a box with _getNonTransformedDimensions and _calculateCurrentDimensions, it is perfectly working. But if I save this to server and then trying setting these two properties, that time it is not rendering.

I am using canvas.getObjects() to traverse all the objects and setting these two properties as you mentioned.

And finally calling canvas.renderAll() function.
Fabric version - 2.4.6

Please suggest something.