Fabric.js : How to Update textbox width and font size on group scaling.

[niketaOptimumnbrew]

Hey,

I'm using fabric.js version 5.3.0.

I want to update textbox width and font size of object depending on group / active selection scaling.

Any idea how to do that?

Thanks.

[zhe-he]

You can upgrade to version 6.0 to write custom controllers, which will allow you to achieve the desired result.

import type { Control } from "fabric";
import { Group } from "fabric";

Group.createControls = (): { controls: Record<string, Control> } => ({ controls: createControls() });

function createControls() {
const tl = new Control({...});
const tr = new Control({...});
...
return { mb, mt,ml, mr, tl, tr, bl, br }
}

[asturur]

@niketaOptimumnbrew scaling of a group can be done by control, by code or when the group is scaled because is inside an active selection. The object will look the same unless you are using patterns or gradients as fill/stroke.

You have to write a function that given the textbox will set the scale factor to 1 and multiply fontSize and width by the old scale, that's it. is simple.
Once you have that function you have to hook it up on events of active selection and groups. and groups in active selections.

[mhieupham1]

Screen.Recording.2024-08-19.at.17.01.13.mov

is it ? try below code

canvas.on('object:scaling', function(e) {
var activeSelection = e.target;

if (activeSelection.type === 'activeSelection') {
  const scaleX = activeSelection.scaleX;
  const scaleY = activeSelection.scaleY;

  activeSelection.getObjects().forEach(function(obj) {
    if (obj.type === 'textbox') {
      const oldStyles = obj.getSelectionStyles(0, obj._text.length);
      let newStyles = [];
      for (let i = 0; i < oldStyles.length; i++) {
        if (oldStyles[i].fontSize) {
          newStyles.push({
            fontSize: (scaleX * Number(oldStyles[i].fontSize)).toFixed(2).toString()
          })
        } else {
          newStyles.push({})
        }
      }

      obj.setAllSelectionStyles(newStyles);
      obj.width = obj.width * scaleX;
      obj.height = obj.height * scaleX;
      obj.left *= scaleX;
      obj.top *= scaleY;
    } else {

      obj.scaleX *= scaleX;
      obj.scaleY *= scaleY;
      obj.left *= scaleX;
      obj.top *= scaleY;
    }
  });

  activeSelection.width = activeSelection.width * activeSelection.scaleX;
  activeSelection.height = activeSelection.height * activeSelection.scaleY;
  activeSelection.scaleX = 1;
  activeSelection.scaleY = 1;

  canvas.renderAll();
}})

[Twelve-Jiang]

if just scaleY， how to do it? because the words will be stretched on the y axis

[mhieupham1]

@Twelve-Jiang I used to wonder about this until I looked at Canva. Canva doesn't show the control points at the top, bottom, left, and right edges when working with text. So, in my application, I will also disable those control points, just like Canva does

[asturur]

Not all features can play well together, limiting not useful options to the user is often easier and better.