Fabric.js中如何固定TextBox宽高，避免随文本内容变化？

为什么height设置不生效？ #

Fabric.js的TextBox默认会根据文本内容自动计算高度，你手动传入的height参数会被文本实际渲染的高度覆盖，所以没效果。而width是用来控制文本换行的宽度，因此能正常生效。

实现固定宽高、不受文本内容影响的TextBox #

要让TextBox保持固定宽高，不管文本怎么修改都不改变尺寸，需要锁定高度并处理文本溢出，具体操作如下：

• 明确设置width和height为目标尺寸
• 开启lockScalingY: true，禁止用户拖动控制点改变高度
• 可选设置textOverflow处理溢出：'ellipsis'显示省略号，'clip'直接裁剪
• 监听文本变化事件，每次文本修改后强制重置高度，确保尺寸不会被文本内容覆盖

修改后的代码示例 #

var canvas = (this.__canvas = new fabric.Canvas("c"));
canvas.uniformScaling = false;

var textBox = new fabric.Textbox("Freedom", {
  left: 100,
  top: 100,
  width: 300,
  height: 200, // 目标固定高度
  fontSize: 20,
  fontWeight: "bold",
  fontStyle: "italic",
  textAlign: "left",
  editable: true,
  hasControls: true,
  editingBorderColor: "red",
  fill: "red",
  objectCaching: false,
  lockScalingFlip: false,
  borderColor: "black",
  lockScalingY: true, // 锁定Y轴缩放，防止高度被拖动改变
  textOverflow: 'ellipsis', // 文本超出时显示省略号
  lineHeight: 1.5 // 调整行高，让文本在固定高度内更合理分布
});

// 监听文本变化事件，强制重置高度
textBox.on('text:changed', function() {
  this.set('height', 200);
  canvas.renderAll();
});

textBox.setControlVisible("mtr", false);
canvas.add(textBox);
canvas.setActiveObject(textBox);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<canvas id="c" width="600" height="400" style="border:1px solid #ccc"></canvas>

另一种方案：用裁剪路径固定显示区域 #

如果不需要文本溢出的省略号，只想直接裁剪超出部分，可以给TextBox添加固定尺寸的裁剪路径：

// 给TextBox添加裁剪路径，限制显示区域为300x200
textBox.clipPath = new fabric.Rect({
  width: 300,
  height: 200,
  left: -textBox.width / 2,
  top: -textBox.height / 2
});

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