如何在Fabric.js中移除组对象外部的文本？

这问题我之前也碰到过，其实核心原因是：Fabric.js的Group默认不会裁剪超出自身边界的子元素内容，所以你的Textbox里的文本会“跑”到Group外面去显示。要搞定这个，咱们给Group加个裁剪区域就行啦。

具体修改方案 #

你可以给Group设置clipPath属性，用一个和Group尺寸完全匹配的矩形作为裁剪范围，这样超出Group边界的文本就会被隐藏。修改后的完整代码如下：

var iText4 = new fabric.Textbox('abcdefghxyz', { 
  left: 50, 
  top: 100, 
  fontFamily: 'Helvetica', 
  width: 30, 
  styles: { 
    0: { 
      0: { textBackgroundColor: 'blue', fill: 'green' }, 
      1: { textBackgroundColor: '#faa' }, 
      2: { textBackgroundColor: 'lightblue' }, 
    } 
  } 
}); 

// 创建和Group尺寸一致的裁剪矩形，高度直接复用Textbox的高度就行
var clipRect = new fabric.Rect({
  width: 60,
  height: iText4.height,
  fill: 'transparent' // 透明不影响原有内容显示
});

var group = new fabric.Group([ iText4 ], { 
  left: 150, 
  top: 100, 
  width: 60,
  clipPath: clipRect // 关键：添加裁剪路径
}); 

var canvas = new fabric.Canvas('c'); 
canvas.add(group); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<canvas id='c' width='500' height='400'></canvas>

补充说明 #

• 要是你用的Fabric.js版本低于2.0，clipPath可能不支持，这时候可以用clipTo函数替代，写法是这样的：

var group = new fabric.Group([ iText4 ], { 
  left: 150, 
  top: 100, 
  width: 60,
  clipTo: function(ctx) {
    // 以Group的中心为原点绘制裁剪矩形
    ctx.rect(-this.width/2, -this.height/2, this.width, this.height);
  }
});

这个函数是通过Canvas上下文手动绘制裁剪区域，效果和clipPath是一样的。

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