Manually set bounding box size

[klavsbuss]

After converting Text to Path via Opentype.js, i've lost kerning/ascender/descender data.
Is there any way I can manually set bounding box size for Path, so that I get same size as original Text object?
Also let me know, if there is better way of doing this?

[klavsbuss]

Is there way i can change object height object.set({ height: 200 }) together with object.set({ originY: 'bottom' }) to solve my problem? If i use object.set({ height: 200 }) then it will resize bounding box from center. 👇 😕

[klavsbuss]

Finally found fix. Instead of trying to resize bounding box, i've created "invisible" rectangle with opacity: 0 and necessary sizing. Then grouped letter with rectangle and got bounding box in correct size.

        let group = new fabric.Group([ letter, rect ], {
            left: 0,
            top: 0,
        });

[timoostrich]

Great workaround, thanks for sharing.

[asturur]

ho @klavsbuss sorry for not answering earlier, i took a break from all the issues.
This was actually a good one.

You can change path width/height after it has been auto calculated.
But this will five you the glyph centered in the box.
Then you have to play with the pathOffset.y so that you can move the path points inside that enlarged rectangle.

[frippe75]

What about having a bounding box smaller than the group?

Doing a simple annotation tool for labeling images. I would like to have the label above the bounding box and add it to the annotation as a group object. Possible?

The trick of adding something transparent doesn't work in this use case and still put the original question back to an "unanswered state" :-)

[xorb]

You could update _getTransformedDimensions for your object.

_getTransformedDimensions(options): Point {

    let height = this.height;
    let width = this.width;
    const dimOptions = {
      scaleX: this.scaleX,
      scaleY: this.scaleY,
      skewX: this.skewX,
      skewY: this.skewY,
      width: 400, // desired height,
      height: 500, // desired widt,
      strokeWidth: this.strokeWidth,
      ...options,
    };

  // rest of the code
}

[asturur]

#7463 (comment)

[asturur]

For whoever comes to this old discussion in 2024, the group now has a layout manager that supports different strategies.
the 'fixed' strategy let you specify the size of the group freely.