How to give Text a bounding box and scale the text to fit within that bounding box?

Hello,

I'm unsure how to use the `fit` method correctly. Your post refers to `fit` as a property, but the only `fit` I found is a method. I'm trying to call the `fit` method - passing it in my `Text` instance and giving it the bounding box `Rect`. Nothing seems to change, though. The `Text` size does not change - it looks like it did before and the same as if I were to comment out the call to `fit` altogether.

Does the below code look like a correct way to use `fit`?

      const vertices = m.BoundingBox.Vertices.$values;
      const position = new geometry.Point(vertices[0].X, vertices[0].Y);

      const text = new Text(m.Text, position, {
        stroke: {
          color: fontColor
        }
      });

      // const bboxWidth = vertices[1].
      const bboxDimensions = getBoundingBoxDimensions(vertices);
      const bbox = new geometry.Rect([0, 0], bboxDimensions);
      fit(text, bbox);

Hello, Ryan,

My apologies it is indeed a method. That should be the way to use it indeed. Can you provide a working example that reproduces your issue so that I can inspect it further and see why it is not working?

Regards,Filip

Filip,

I put together a working example that reproduces the way that I'm using the fit method. You can see that it doesn't seem to do anything. If you change the dimensions of the bounding box the text does not scale to fill it up.

Any ideas?

https://stackblitz.com/edit/react-ts-rob7wj?file=index.tsx

Hi Ryan,

Thank you for sharing the example.

As stated in the documentation, if the element passed to the fit function is already small enough to fit in the rectangle, there will be no changes applied.

In order to scale up the Text element you can use the transform.scale instead:

• https://stackblitz.com/edit/react-ts-fgxhrb?file=index.tsx

Based on the exact requirement, you can change the logic and keep the ratio of the original Text the same by unifying the scale on x and y (using the smaller of the two values: rect.x/text.x and rect.y/text.y. Using the smaller value will ensure that the Text will fit in the rectangle after the scaling.

Hope this helps.