Vue+Canvas绘图使用的讲解

下面是Vue+Canvas绘图的攻略：

1. 准备工作

在Vue项目中引入canvas，你可以在main.js文件中引入VueKonva插件，该插件使得Canvas的使用更简单，也方便了对canvas的管理，引入方式如下：

import Vue from 'vue'
import VueKonva from 'vue-konva'

Vue.use(VueKonva)

2. Canvas绘图

2.1 绘制基础图形

在canvas中，我们可以使用canvas的API来绘制各种基本图形，例如直线、圆、矩形等。下面给出一个绘制圆和矩形的示例代码：

<template>
  <v-stage>
    <v-layer>
      <v-circle :x="200" :y="100" :radius="50" fill="#B3E5FC" />
      <v-rect :x="100" :y="200" :width="100" :height="50" fill="#B3E5FC" />
    </v-layer>
  </v-stage>
</template>

上述代码绘制了一个半径为50的圆和一个宽为100，高为50的矩形。通过修改圆的x、y坐标和矩形的x、y、width、height属性可以实现各种不同的图形绘制。

2.2 通过鼠标绘制图形

在canvas中，我们还可以通过鼠标来绘制图形。下面给出一个简单的实现鼠标绘制线条的示例代码：

<template>
  <v-stage
    @mousedown="handleMouseDown"
    @mousemove="handleMouseMove"
    @mouseup="handleMouseUp"
  >
    <v-layer>
      <v-line
        v-if="isDrawing"
        :x="startPoint.x"
        :y="startPoint.y"
        :points="[0, 0, endPoint.x - startPoint.x, endPoint.y - startPoint.y]"
        stroke="#B3E5FC"
        lineCap="round"
        lineJoin="round"
        strokeWidth="5"
      />
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      startPoint: {},
      endPoint: {},
    };
  },
  methods: {
    handleMouseDown(event) {
      this.isDrawing = true;
      const { x, y } = event.target.getStage().getPointerPosition();
      this.startPoint = { x, y };
    },
    handleMouseMove(event) {
      if (!this.isDrawing) {
        return;
      }
      const { x, y } = event.target.getStage().getPointerPosition();
      this.endPoint = { x, y };
    },
    handleMouseUp() {
      this.isDrawing = false;
      this.startPoint = {};
      this.endPoint = {};
    },
  },
};
</script>

上述代码实现了鼠标拖动绘制线条的功能，当鼠标按下时，记录下起始坐标点，鼠标移动时即时更新终点坐标点，当鼠标抬起时，将起始坐标点和终点坐标点更新为空对象。