Fabric.js视频流场景下Textbox点击后铺满画布问题解决咨询

我一眼就看出问题出在你设置的selectable:false上——这个属性会让Textbox失去可选中状态，而Fabric.js的Textbox组件依赖选中状态来维持自身的尺寸约束和编辑功能，一旦不可选中，它就会出现布局异常（铺满画布），同时自然也无法输入文字了。

下面是针对性的解决方案，分两步帮你搞定：

1. 恢复可选中状态并锁定尺寸 #

把selectable:false改成selectable:true，然后通过额外属性锁定它的尺寸，防止用户随意调整：

oText = new fabric.Textbox('', {
  width: 150,
  top: 50,
  left: 50,
  fontSize: 16,
  textAlign: 'center',
  fill: brushColor,
  // 必须开启可选中才能触发编辑功能
  selectable: true,
  // 锁定横向/纵向缩放，固定宽度
  lockScalingX: true,
  lockScalingY: true,
  // 可选：限制最小/最大宽度，进一步约束尺寸范围
  minWidth: 150,
  maxWidth: 150,
  // 可选：如果不需要移动Textbox，可以锁定拖拽位置
  // lockMovementX: true,
  // lockMovementY: true
});
canvas.add(oText);

2. 确保Textbox能正常获取焦点编辑 #

如果还是出现无法输入的情况，可以手动监听画布点击事件，主动触发编辑状态：

canvas.on('mouse:down', function(options) {
  if (options.target && options.target.type === 'textbox') {
    // 触发Textbox的编辑模式
    options.target.enterEditing();
    // 将焦点定位到内部输入框
    options.target.hiddenTextarea.focus();
  } else {
    // 点击外部时退出编辑，避免异常状态
    const activeObj = canvas.getActiveObject();
    if (activeObj && activeObj.type === 'textbox') {
      activeObj.exitEditing();
    }
  }
});

关键原理说明 #

• Fabric.js的Textbox在selectable:false时，会跳过内部的尺寸计算逻辑，导致它自动拉伸填满画布。
• 文字输入功能完全依赖选中状态，只有当Textbox被选中（selectable:true）时，才会渲染内部的输入框，实现文字输入。

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