VueKonva 实时绘制鼠标轨迹线条

要实现VueKonva跟随鼠标移动不停地绘制出线条，你可以按照以下步骤进行操作：

首先，安装VueKonva和Konva库，可以使用npm或yarn进行安装：

npm install vue-konva konva

在Vue组件中导入VueKonva库：

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

在Vue组件中添加一个Stage元素，用于绘制画布：

<template>
  <div>
    <Stage :config='{ width: 800, height: 600 }'>
      <Layer>
        <Line :points='points' stroke='black' strokeWidth='2' />
      </Layer>
    </Stage>
  </div>
</template>

在Vue组件的data中定义一个points数组，用于存储线条的坐标点：

data() {
  return {
    points: []
  };
},

在Vue组件的methods中添加一个方法，用于监听鼠标移动事件，并更新points数组：

methods: {
  handleMouseMove(event) {
    const stage = event.target.getStage();
    const position = stage.getPointerPosition();
    const { x, y } = position;
    this.points.push(x, y);
  }
},

在Vue组件的mounted钩子函数中，添加监听鼠标移动事件的逻辑：

mounted() {
  window.addEventListener('mousemove', this.handleMouseMove);
},

在Vue组件的beforeDestroy钩子函数中，移除监听鼠标移动事件的逻辑：

beforeDestroy() {
  window.removeEventListener('mousemove', this.handleMouseMove);
},

现在，当你在Vue组件中移动鼠标时，VueKonva将会不停地绘制出线条。