VueKonva 实时绘制线条跟随鼠标移动

在 VueKonva 中，要实现跟随鼠标移动不停绘制出线条的效果，你需要在鼠标移动事件中更新线条的终点坐标，并重新绘制线条。

以下是一个示例代码，可以在 VueKonva 中实现该效果：

<template>
  <v-stage ref="stage" :config="stageConfig">
    <v-layer ref="layer">
      <v-line ref="line" :config="lineConfig"></v-line>
    </v-layer>
  </v-stage>
</template>

<script>
import { Stage, Layer, Line } from 'vue-konva';

export default {
  name: 'App',
  components: {
    Stage,
    Layer,
    Line,
  },
  data() {
    return {
      stageConfig: {
        width: 500,
        height: 500,
      },
      lineConfig: {
        stroke: 'green',
        strokeWidth: 20,
        points: [],
      },
    };
  },
  mounted() {
    this.$refs.stage.getStage().on('mousemove', this.handleMouseMove);
  },
  methods: {
    handleMouseMove(e) {
      const stage = this.$refs.stage.getStage();
      const layer = this.$refs.layer.getLayer();
      const line = this.$refs.line.getStage();
      
      const pos = stage.getPointerPosition();
      const points = [...line.config.points, pos.x, pos.y];
      line.setAttr('points', points);
      layer.draw();
    },
  },
};
</script>

在上述代码中，我们绑定了鼠标移动事件mousemove，在事件处理函数handleMouseMove中，获取鼠标的坐标pos，并将其添加到线条的点数组中。然后通过调用layer.draw()来重新绘制图层，实现线条的更新和显示。

请注意，示例中使用了 VueKonva 的组件v-stage、v-layer 和 v-line 来创建舞台、图层和线条。你需要确保正确安装和引入 VueKonva 库，以及在 Vue 中注册这些组件。