vue konva的多个rect如何添加鼠标移动进去文字提示

要实现多个rect添加鼠标移动进去文字提示，可以按照以下步骤进行：

1. 给每个rect添加mouseOver事件监听器，当鼠标移动进入rect时触发该事件。
2. 在事件处理函数中，使用Konva.js提供的toLocal()方法将鼠标事件的坐标转换为相对于rect的本地坐标。
3. 根据本地坐标计算出需要显示的提示文字的位置，并添加一个Konva.Text节点来显示该文字。
4. 当鼠标移出rect时，将该提示文字节点从画布中移除。

以下是示例代码：

// 创建一个Konva.Stage舞台和一个Konva.Layer图层
var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});
var layer = new Konva.Layer();

// 创建多个Konva.Rect节点
for (var i = 0; i < 5; i++) {
  var rect = new Konva.Rect({
    x: 50 + i * 80,
    y: 50,
    width: 50,
    height: 50,
    fill: 'blue'
  });

  // 给每个rect添加mouseOver事件监听器
  rect.on('mouseover', function(e) {
    // 计算提示文字的位置
    var localPos = layer.getPointerPosition();
    var rectPos = this.getClientRect();
    var textPos = {
      x: rectPos.x + rectPos.width / 2,
      y: rectPos.y + rectPos.height + 10
    };

    // 添加一个Konva.Text节点来显示提示文字
    var text = new Konva.Text({
      x: textPos.x,
      y: textPos.y,
      text: 'Hello World!',
      fontSize: 14,
      fontFamily: 'Arial',
      fill: 'black',
      align: 'center'
    });
    layer.add(text);
    layer.draw();
  });

  // 给每个rect添加mouseOut事件监听器
  rect.on('mouseout', function(e) {
    // 移除提示文字节点
    var text = layer.findOne('.tooltip');
    if (text) {
      text.destroy();
      layer.draw();
    }
  });

  layer.add(rect);
}

stage.add(layer);

在上面的代码中，我们使用了getPointerPosition()方法获取当前的鼠标位置，使用getClientRect()方法获取当前rect的大小和位置信息，然后根据这些信息计算出提示文字的位置。我们还给提示文字节点添加了一个类名`.tooltip`，这样在移除提示文字节点时可以方便地查找到它。