在fabricjs中缩放文本框时更改字体大小

拖拽文字框，文字字号不更新的问题

在fabric.js中，可以通过缩放文本框来更改字体大小。fabric.js是一个强大的HTML5 canvas库，用于创建交互式的图形应用程序。

要在fabric.js中缩放文本框并更改字体大小，可以按照以下步骤进行操作：

创建一个fabric.Canvas对象，用于在页面上显示和操作图形元素。

var canvas = new fabric.Canvas('canvas');

创建一个fabric.Text对象，表示要显示的文本框。

var text = new fabric.Text('Hello World', {
  left: 50,
  top: 50,
  fontSize: 20,
});
canvas.add(text);

在上面的代码中，我们创建了一个文本框，初始字体大小为20像素。

缩放文本框时更改字体大小。

canvas.on('object:scaling', function(e) {
  var obj = e.target;
  var scaleX = obj.scaleX;
  var scaleY = obj.scaleY;
  var fontSize = obj.fontSize;

  obj.set({
    fontSize: fontSize * scaleX,
    scaleX: 1,
    scaleY: 1
  });
});

在上面的代码中，我们监听了canvas对象的object:scaling事件。

当用户对文本框进行缩放操作时，会触发该事件。在事件处理程序中，我们获取当前文本框的缩放比例和字体大小，并根据缩放比例调整字体大小。

最后，将缩放比例重置为1，以保持文本框的比例。

获取文本框的字号

在合适的逻辑部分，获取相应的字号：

const textObjectCurrent = fabricCanvas.getActiveObject();
if (!textObjectCurrent || !(textObjectCurrent.type === 'text')) {
                    return;
}
 console.log(textObjectCurrent.get('fontSize'))
或者
 console.log(textObjectCurrent.fontSize')) 都可以

在实际操作中，一定要确保文字使用的字体加载完成后再执行修改的逻辑：

 watch(
    () => textForm,
    (newval) => {
        console.log(newval)
        const textObjectCurrent = fabricCanvas.getActiveObject();
        // 如果没有焦点元素 并且不是文本类型
        if (!textObjectCurrent || !(textObjectCurrent.type === 'text')) {
            return;
        }
        //textObjectCurrent.setCoords(); // 确保文本的坐标是最新的
        const fontSizeNow = textObjectCurrent.get('fontSize');
        document.fonts.load(`${fontSizeNow}px ${textForm.fontFamily}`).then(() => {
            // 修改文本内容
            textObjectCurrent.set({
                text: newval.content,
                fill: newval.textColor,
                // 文字字体
                fontFamily: newval.fontFamily,
                // 文字粗细
                fontWeight: newval.textWeight,
                // 文本描边的颜色
                stroke: newval.strokeColor,
                // 文本描边的宽度
                strokeWidth: newval.strokeWidth,
                // 文本字间距
                charSpacing: newval.charSpacing
            });
            fabricCanvas.renderAll();
        });
    },
    {
        deep: true
    }
)

${fontSizeNow}px=当前字体的字号  ${textForm.fontFamily}=当前的字体名称，需要在css中的@font-face中定义。