Konvajs 实现鼠标移入group后 显示group的虚线边框 移出group后边框消失 鼠标点击group后添加实现边框并且不显示虚线边框

可以使用KonvaJS的事件监听器来实现鼠标移入group时动态添加虚线边框，移出时消失，并且鼠标点击group后添加实线边框并且不显示虚线边框。具体实现步骤如下：

1. 首先，创建一个group对象，并将其添加到KonvaJS的舞台(stage)中。

2. 使用KonvaJS的事件监听器，监听group对象的"mouseenter"、"mouseleave"和"click"事件。

3. 在"mouseenter"事件处理函数中，获取group对象的边界框(bounding box)，并创建一个虚线矩形(dashed rect)，设置其填充色为透明，边框颜色和宽度为想要的颜色和宽度，线型为虚线，将其添加到舞台(stage)中。

4. 在"mouseleave"事件处理函数中，移除虚线矩形对象。

5. 在"click"事件处理函数中，获取虚线矩形对象，并更新其线型为实线，再重新绘制舞台(stage)。

以下是示例代码：

// 创建一个group对象
var group = new Konva.Group({
  x: 50,
  y: 50,
  width: 100,
  height: 100
});
// 将group对象添加到舞台中
stage.add(group);

// 监听group对象的"mouseenter"、"mouseleave"和"click"事件
group.on("mouseenter", function() {
  // 获取group对象的边界框
  var boundingBox = group.getClientRect();
  // 创建一个虚线矩形
  var dashedRect = new Konva.Rect({
    x: boundingBox.x,
    y: boundingBox.y,
    width: boundingBox.width,
    height: boundingBox.height,
    stroke: "red",
    strokeWidth: 2,
    dash: [5, 5],
    fillEnabled: false
  });
  // 将虚线矩形对象添加到舞台中
  stage.add(dashedRect);
  // 重新绘制舞台
  stage.draw();
});

group.on("mouseleave", function() {
  // 移除虚线矩形对象
  stage.children[1].destroy();
});

group.on("click", function() {
  // 获取虚线矩形对象
  var dashedRect = stage.children[1];
  // 更新虚线矩形对象的线型
  dashedRect.dashEnabled(false);
  // 重新绘制舞台
  stage.draw();
});

以上代码实现了鼠标移入group后动态添加虚线边框，移出后消失，并且鼠标点击group后添加实线边框并且不显示虚线边框的效果。