如何去除Fabric.js文本对象的默认垂直内边距/空白区域

问题描述 #

开发Fabric.js项目时，需要让文本对象的边界完全贴合实际文本尺寸：当字号设为20时，文本高度需刚好为20（已通过scaleX/scaleY实现缩放），但目前文本对象的边界高度大于实际文本高度，导致无法将文本准确限制在父对象内部。宽度显示正常，仅高度存在问题。尝试设置strokeWidth:0效果有限，未找到合适解决方案。

问题图示 #

现有代码片段 #

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,
  });
});

解决方案 #

1. 重写文本对象的高度计算方法
   Fabric.js默认会为文本上下预留基线间距，这是边界高度偏大的核心原因。重写_getHeightOfLine方法，直接返回缩放后的字号高度，去掉额外间距：

fabric.Text.prototype._getHeightOfLine = function(line, lineIndex, previousLineHeight) {
  // 直接返回缩放后的字号高度，匹配文本实际高度
  return this.fontSize * this.scaleY;
};

2. 调整行高并移除手动设置的height
   当前设置的lineHeight:0.8会干扰高度计算，且手动强制设置height:text.fontSize会覆盖Fabric的自动边界计算。修改代码如下：

const fabricText = new fabric.Text(text.value, {
  // 保留原有其他配置...
  lineHeight: 1, // 设为1，确保行高完全匹配字号
  scaleX: 1.4,
  scaleY: 1.4,
});

// 移除手动设置height的代码，让Fabric自动计算准确边界
// fabricText.set({ height: text.fontSize, ... });

3. 确保文本在父对象内的适配
   完成上述修改后，文本边界高度会准确匹配fontSize * scaleY的数值。此时可使用Fabric内置方法确保文本始终在父对象内部：

// 假设parentRect是你的父容器对象
fabricText.containWithinRect(parentRect.left, parentRect.top, parentRect.width, parentRect.height);

原理说明 #

• Fabric.js默认的文本高度计算包含字体的上下基线留白，重写_getHeightOfLine可跳过这些额外空间；
• 手动设置height会破坏Fabric的自动边界逻辑，移除后才能让边界贴合实际文本；
• lineHeight设为1保证行高与字号完全对齐，避免行高带来的额外高度。

内容的提问来源于stack exchange，提问作者alexander Stenberg