fabric.js 给group的子元素button按钮添加鼠标hover后改变边框和字体颜色效果

可以使用 fabric.js 中的 set({...}) 方法来实现这个效果。

首先，你需要添加一个 hoverCursor 属性，来改变鼠标在 button 上时的光标样式，例如 'pointer' 或 'default'。

然后，你可以使用 fabric.js 的事件机制来检测鼠标的 hover 事件。可以使用 button.on('mouseover', function() {...}) 来检测鼠标进入 button 的事件，然后使用 set 方法改变 button 的属性，例如边框颜色和字体颜色。同样，你也可以使用 button.on('mouseout', function() {...}) 来检测鼠标离开 button 的事件，并使用 set 方法恢复 button 的原始属性。

例如：

var button = new fabric.Group([rect, text]);
button.set({
  hoverCursor: 'pointer',
});
button.on('mouseover', function() {
  button.set({
    stroke: 'red',
    fill: 'yellow',
    strokeWidth: 5,
  });
  canvas.renderAll();
});
button.on('mouseout', function() {
  button.set({
    stroke: 'black',
    fill: 'white',
    strokeWidth: 1,
  });
  canvas.renderAll();
});
canvas.add(button);

在这个例子中，我们创建了一个包含矩形和文本的 button 组，并为它设置了 hoverCursor 属性，以改变鼠标在 button 上时的光标样式。然后，我们使用 on 方法监听 mouseover 和 mouseout 事件，并使用 set 方法改变 button 的边框颜色、填充颜色和边框宽度。