vue如何实现在页面上画画_vue组件：canvas实现图片涂鸦功能

方案背景

需求

需要对图片进行标注，导出图片。

需要标注N多图片最后同时保存。

需要根据多边形区域数据(区域、颜色、名称)标注。

对应方案

用canvas实现涂鸦、圆形、矩形的绘制，最终生成图片base64编码用于上传

大量图片批量上传很耗时间，为了提高用户体验，改为只实现圆形、矩形绘制，最终保存成坐标，下次显示时根据坐标再绘制。

多边形区域的显示是根据坐标点绘制，名称显示的位置为多边形质心。

代码

<template>

<div>

<canvas

:id="radom"

:class="{canDraw: 'canvas'}"

:width="width"

:height="height"

:style="{'width':`${width}px`,'height':`${height}px`}"

@mousedown="canvasDown($event)"

@mouseup="canvasUp($event)"

@mousemove="canvasMove($event)"

@touchstart="canvasDown($event)"

@touchend="canvasUp($event)"

@touchmove="canvasMove($event)">

</canvas>

</div>

</template>

<script>

// import proxy from './proxy.js'

const uuid = require('node-uuid')

export default {

props: {

canDraw: { // 图片路径

type: Boolean,

default: true

},

url: { // 图片路径

type: String

},

info: { // 位置点信息

type: Array

},

width: { // 绘图区域宽度

type: String

},

height: { // 绘图区域高度

type: String

},

lineColor: { // 画笔颜色

type: String,

default: 'red'

},

lineWidth: { // 画笔宽度

type: Number,

default: 2

},

lineType: { // 画笔类型

type: String,

default: 'circle'

}

},

watch: {

info (val) {

if (val) {

this.initDraw()</