Fabric JS中如何单独设置文本和文本背景的透明度

问题原因 #

Fabric 中元素的 opacity 是作用于整个元素的全局属性，修改时会同步影响文本填充、文本背景、描边等所有视觉部分，这就是你修改透明度时两者一起变透明的原因。

解决方法 #

你不需要修改整个元素的opacity，单独调整文本填充色的透明度即可，textBackgroundColor属于独立属性，不会受填充色透明度的影响：

// 仅将文本填充设为全透明，保留文本背景的显示效果
text.set({
  fill: 'rgba(0, 0, 0, 0)'
});
// 修改后重新渲染画布
canvas.renderAll();

这种方式可以直接实现你要的挖空效果：黄色文本背景完全不透明，文本本身全透明，透过文本区域可以看到画布下层的内容。

进阶方案（适用于整块背景挖空场景） #

如果你需要的是整块矩形黄色背景上挖出文本形状的效果，可以使用合成模式实现：

// 创建黄色背景块
const yellowBg = new fabric.Rect({
  width: 250,
  height: 80,
  fill: 'yellow',
  left: 50,
  top: 50
});
// 创建用于挖空的文本
const hollowText = new fabric.IText('My Text', {
  fontSize: 40,
  left: 15,
  top: 15,
  fill: '#000'
});
// 组合两个元素
const hollowGroup = new fabric.Group([yellowBg, hollowText], {
  left: 50,
  top: 50
});
// 设置文本合成模式为挖空
hollowText.globalCompositeOperation = 'destination-out';
canvas.add(hollowGroup);
canvas.renderAll();

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