Fabric.js组内对象事件实现：鼠标悬停圆形时显示文本

首先咱们理清核心思路：因为圆形和文本在同一个Group里，默认先把文本隐藏，然后给圆形绑定鼠标悬停和离开事件，用来切换文本的显示状态。另外要注意，Fabric.js的Group默认不会把事件传递给子元素，所以得开启subTargetCheck属性，这样里面的圆形才能接收到鼠标事件。

下面是整合好逻辑的完整代码：

// 初始化画布
var canvas = new fabric.Canvas('canvDraw');

// 创建圆形对象
var c = new fabric.Circle({
  radius: 10,
  left: 0,
  fill: '#000',
  opacity: 1,
  hasControls: true,
  hasBorders: true,
  visible: true
});

// 创建文本对象，默认隐藏
var text = new fabric.Text("Very long text data displayed on hover", {
  left: 20, // 把文本放在圆形右侧，避免重叠
  top: -5,
  visible: false // 默认隐藏文本
});

// 创建Group，开启子元素事件检测
var group = new fabric.Group([c, text], {
  left: 50, // 这里替换成你实际需要的坐标值
  top: 50,
  subTargetCheck: true // 关键配置：允许子元素接收鼠标事件
});

// 给圆形添加鼠标进入事件：显示文本
c.on('mouseover', function() {
  text.set('visible', true);
  canvas.renderAll(); // 刷新画布更新显示
});

// 给圆形添加鼠标离开事件：隐藏文本
c.on('mouseout', function() {
  text.set('visible', false);
  canvas.renderAll(); // 刷新画布更新显示
});

// 将Group添加到画布
canvas.add(group);

关键细节说明： #

• subTargetCheck: true：必须给Group设置这个属性，否则鼠标事件只会触发Group本身，圆形接收不到悬停信号，交互就失效了。
• 文本初始状态：初始化时把文本设为visible: false，只有当鼠标悬停圆形时才显示。
• 文本位置调整：我给文本加了left:20和top:-5的偏移，让它在圆形旁边展示，你可以根据需求随意调整这个位置。
• 画布刷新：每次修改元素状态后调用canvas.renderAll()，确保画布实时更新显示效果。

这样就能完美实现你要的“鼠标悬停圆形时显示对应文本”的交互啦！

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