How to remove default vertical padding/whitespace on a fabricjs text object

28 Views Asked by At

I am working on a fabricjs project that uses text objects. If the text object gets a value or font size of 20 then the height of the text should be 20 (which it is using scaleX and scaleY) but my functions are limited, since the text objects bounds are bigger than the text size and I'm using functions to keep objects inside of parent the object.

I need the bounds to be exactly the size of my text object. The width of the object is perfect, its just the height that's causing problems.

In the image is my parent object the white rectangle and the border around the text is the text bounds that should be the exact size of the text value:

In the image is my parent object the white rectangle and the border around the text is the text bounds that should be the exact size of the text value.

I have tried setting strokeWidth to 0 which helped a little bit. I've tried checking everywhere on stack and google and i cant find a good answer to this.

This is a part of my hook to create the fabric text object:

textArray.forEach((text) => {
  const fabricText = new fabric.text(text.value, {
    left: centerX,
    fill: textColor,
    id: text.id,
    fontFamily: text.font ? text.font : 'din-2014',
    underline: text.underline && text.underline,
    textAlign: text.textAlign ? text.textAlign : 'center',
    objectCaching: false,
    hasControls: false,
    hasBorders: true,
    lineHeight: 0.8,
    fontStyle:
      text.fontStyle === FontStyle.Italic ? text.fontStyle : 'normal',
    fontWeight: text.fontStyle === FontStyle.Oblique ? 900 : undefined,
    evented: false,
    fontSize: text.fontSize,
    selectable: false,
    originY: 'center',
    originX: 'center',
    strokeWidth: 0,
    padding: 0,
    scaleX: 1.4,
    scaleY: 1.4,
  });

  fabricText.set({
    height: text.fontSize,
    top:
      centerY -
      totalTextHeight / 2 +
      accumulatedHeight +
      ((fabricText.height || 0) + text.textHeight / 2) / 2,
  });
0

There are 0 best solutions below