konva给每个rect添加鼠标移动进去文字提示

要给Konva中的每个矩形添加鼠标移动进入时的文字提示，可以使用Konva的事件监听器和tooltips。

首先，为每个矩形添加一个事件监听器，监听鼠标移动进入事件：

rect.on('mouseover', function() {
  // 显示tooltip
});

然后，在事件监听器中，创建一个Konva tooltip对象，并将其添加到舞台上：

var tooltip = new Konva.Label({
  opacity: 0.75,
  visible: false,
  listening: false
});

layer.add(tooltip);

接下来，将要显示的文本添加到tooltip对象中：

tooltip.add(new Konva.Tag({
  fill: 'black',
  pointerDirection: 'down',
  pointerWidth: 10,
  pointerHeight: 10,
  lineJoin: 'round',
  shadowColor: 'black',
  shadowBlur: 10,
  shadowOffset: 10,
  shadowOpacity: 0.5
}));

tooltip.add(new Konva.Text({
  text: 'Tooltip Text',
  fontFamily: 'Calibri',
  fontSize: 18,
  padding: 5,
  fill: 'white'
}));

最后，在事件监听器中，设置tooltip的位置和可见性，并将其移到最上层：

tooltip.position({
  x: rect.x(),
  y: rect.y() - 20
});

tooltip.show();

tooltip.moveToTop();

完整的代码示例：

rect.on('mouseover', function() {
  var tooltip = new Konva.Label({
    opacity: 0.75,
    visible: false,
    listening: false
  });

  tooltip.add(new Konva.Tag({
    fill: 'black',
    pointerDirection: 'down',
    pointerWidth: 10,
    pointerHeight: 10,
    lineJoin: 'round',
    shadowColor: 'black',
    shadowBlur: 10,
    shadowOffset: 10,
    shadowOpacity: 0.5
  }));

  tooltip.add(new Konva.Text({
    text: 'Tooltip Text',
    fontFamily: 'Calibri',
    fontSize: 18,
    padding: 5,
    fill: 'white'
  }));

  layer.add(tooltip);

  tooltip.position({
    x: rect.x(),
    y: rect.y() - 20
  });

  tooltip.show();

  tooltip.moveToTop();
});