Konvajs 实现 鼠标进入 图形后显示虚线框

您可以使用KonvaJS提供的事件监听器来实现鼠标进入图形后显示虚线框的效果。具体实现步骤如下：

1. 创建一个矩形，用于表示虚线框，并设置其属性如下：

var rect = new Konva.Rect({
  stroke: 'gray',
  strokeWidth: 1,
  dash: [4, 4], // 设置为虚线
  visible: false // 初始状态不可见
});

2. 监听图形的`mouseover`和`mouseout`事件，用于显示/隐藏虚线框：

// 鼠标进入图形时显示虚线框
shape.on('mouseover', function() {
  rect.x(shape.x());
  rect.y(shape.y());
  rect.width(shape.width());
  rect.height(shape.height());
  rect.visible(true);
  layer.batchDraw();
});

// 鼠标离开图形时隐藏虚线框
shape.on('mouseout', function() {
  rect.visible(false);
  layer.batchDraw();
});

在`mouseover`事件中，设置虚线框的位置和大小，然后将其设置为可见状态；在`mouseout`事件中，将其设置为不可见状态即可。

完整的代码示例：

var stage = new Konva.Stage({
  container: 'container',
  width: 500,
  height: 500
});

var layer = new Konva.Layer();
stage.add(layer);

var shape = new Konva.Rect({
  x: 50,
  y: 50,
  width: 100,
  height: 100,
  fill: 'red'
});
layer.add(shape);

var rect = new Konva.Rect({
  stroke: 'gray',
  strokeWidth: 1,
  dash: [4, 4],
  visible: false
});
layer.add(rect);

shape.on('mouseover', function() {
  rect.x(shape.x());
  rect.y(shape.y());
  rect.width(shape.width());
  rect.height(shape.height());
  rect.visible(true);
  layer.batchDraw();
});

shape.on('mouseout', function() {
  rect.visible(false);
  layer.batchDraw();
});

layer.draw();