item.w * this.width。

b 0 ? b : -b)let info = this.drawInfo[this.drawInfo.length - 1]info.a = a / this.widthinfo.b = b / this.height}this.context.stroke()}}。

默认2 lineWidth: number 绘图笔类型， 0)this.context.beginPath()this.context.rect(this.beginRec.x， ，// 根据坐标信息绘制图形drawWithInfo () {this.info.forEach(item = {this.context.beginPath()if (!item.type) {// 设置颜色this.context.strokeStyle = item.regionColorthis.context.fillStyle = item.regionColor// 绘制多边形的边if (typeof item.region === string) {item.region = JSON.parse(item.region)}item.region.forEach(point = {this.context.lineTo(point.x * this.width，type: this.lineType})}}， 多边形区域的显示是根据坐标点绘制，// 鼠标移动时绘制canvasMove (e) {if (this.canvasMoveUse this.canDraw) {// client是基于整个页面的坐标，默认true canDraw: boolean 坐标点信息。

data () {return {// 同一页面多次渲染时，下次显示时根据坐标再绘制， this.width。

// 获取坐标信息getInfo () {return this.drawInfo}。

0，height:`${height}px`}@mousedown=canvasDown($event)@mouseup=canvasUp($event)@mousemove=canvasMove($event)@touchstart=canvasDown($event)@touchend=canvasUp($event)@touchmove=canvasMove($event)/canvas /div/templatescript // import proxy from ./proxy.js const uuid = require(node-uuid) export default {props: {canDraw: { // 图片路径type: Boolean， point.x * this.width，lineWidth: { // 画笔宽度type: Number，lineColor: { // 画笔颜色type: String，y: canvasY / this.height。

代码template divcanvas:id=radom:class={canDraw: canvas}:width=width:height=height:style={width:`${width}px`，是通过父元素坐标获取的，最终保存成坐标，// 储存坐标信息drawInfo: []，width: { // 绘图区域宽度type: String}。

Anonymous)this.img.src = this.urlthis.img.onerror = () = {var timeStamp = +new Date()this.img.src = this.url + ? + timeStamp}this.img.onload = () = {this.clean()}// proxy.getBase64({imgUrl: this.url}).then((res) = {// if (res.code * 1 === 0) {//this.img.src = data:image/jpeg;base64， this.beginRec.x + a，// 绘制矩形和椭圆时用来保存起始点信息beginRec: {x: ，default: circle}}，default: red}，lineType: { // 画笔类型type: String， y，再给canvas绘制解决的。

有需要的朋友可以参考一下， 需求 需要对图片进行标注，y: sum_y / sum_area / 3}}， (item.x + item.a) * this.width， this.beginRec.y + b，// 绘制椭圆drawEllipse (context， item.h * this.height)} else if (item.type === circle) {this.drawEllipse(this.context。

默认true canDraw: boolean 绘图颜色。

0。

this.beginRec.y， 如果涂鸦后保存再请求图片url出现请求不到的情况，// 是否处于绘制状态canvasMoveUse: false。

(item.y + item.b) * this.height， item.b 0 ? item.b * this.height : -item.b * this.height)}this.context.stroke()})}，watch: {info (val) {if (val) {this.initDraw()}}}，p1， r， 0， 需要根据多边形区域数据（区域、颜色、名称）标注，希望对你有所帮助，// canvas对象context: {}。

imageData: }，// 鼠标抬起canvasUp (e) {if (this.canDraw) {this.canvasMoveUse = false}}，否则绘制坐标会偏移，最终生成图片base64编码用于上传 大量图片批量上传很耗时间。

2 * Math.PI， a 0 ? a : -a，methods: {// 初始化绘制信息initDraw () {// 初始化画布const canvas = document.getElementById(this.radom)this.context = canvas.getContext(2d)// 初始化背景图片this.img.setAttribute(crossOrigin，并不一定适用于其他项目。

0， 导出坐标点数据只能导出规则图案的坐标点。

point.y * this.height)} else if (item.type === rec) {this.context.rect(item.x * this.width， this.height)// 存储本次绘制坐标信息this.drawInfo.push({x: canvasX / this.width，有一定的参考价值，改为只实现圆形、矩形绘制，url: { // 图片路径type: String}， 域名不同的图片可能存在跨域问题，默认red lineColor: string 绘图笔宽度，rec、circle。

offset是cavas距离pictureDetail顶部以及左边的距离let canvasX = e.clientX - e.target.parentNode.offsetLeftlet canvasY = e.clientY - e.target.parentNode.offsetTopif (this.lineType === rec) { // 绘制矩形时恢复起始点状态再重新绘制this.context.putImageData(this.beginRec.imageData。

是因为CDN缓存的问题， b) {context.save()var r = (a b) ? a : bvar ratioX = a / rvar ratioY = b / rcontext.scale(ratioX， 对应方案 用canvas实现涂鸦、圆形、矩形的绘制， ratioY)context.beginPath()context.arc(x / ratioX，默认rec lineType: string 可以调用的方法 清空画布 clean() 返回坐标点信息 getInfo() 特殊说明 canvas对象不能获得坐标， item.y * this.height，因为随意涂鸦的坐标点太多时会崩溃的（虽然没试过具体到什么程度会崩溃），在图片路径后面拼个随机码就可以解决，info: { // 位置点信息type: Array}，不传入则不绘制 info: string 是否可绘制，用于区分元素的idradom: uuid.v4()，如果有更好的办法解决欢迎分享，// 鼠标按下canvasDown (e) {if (this.canDraw) {this.canvasMoveUse = true// client是基于整个页面的坐标。

// 背景图片缓存img: new Image()}}， a，offset是cavas距离pictureDetail顶部以及左边的距离const canvasX = e.clientX - e.target.parentNode.offsetLeftconst canvasY = e.clientY - e.target.parentNode.offsetTop// 记录起始点和起始状态this.beginRec.x = canvasXthis.beginRec.y = canvasYthis.beginRec.imageData = this.context.getImageData(0，mounted () {this.initDraw()}，名称显示的位置为多边形质心，导出图片。

x，为了提高用户体验， this.height)this.drawInfo = []if (this.info this.info.length !== 0) this.drawWithInfo()}} }/scriptstyle scoped .canvas{cursor: crosshair; }/style 必须传入的参数 图片路径 url: string 绘图区域宽度 width: string 绘图区域高度 height: string 选择传入的参数 是否可以绘制， canvasX - this.beginRec.x，+res.data//this.img.onload = () = {//this.clean()//}// }// })// 初始化画笔this.context.lineWidth = this.lineWidththis.context.strokeStyle = this.lineColor}。

default: true}，p1， this.width， 0， false)context.closePath()context.restore()}。

canvasY - this.beginRec.y)let info = this.drawInfo[this.drawInfo.length - 1]info.w = canvasX / this.width - info.xinfo.h = canvasY / this.height - info.y} else if (this.lineType === circle) { // 绘制椭圆时恢复起始点状态再重新绘制this.context.putImageData(this.beginRec.imageData。

y / ratioY，height: { // 绘图区域高度type: String}，default: 2}，y: ，// 计算多边形质心getPolygonAreaCenter (points) {let sum_x = 0;let sum_y = 0;let sum_area = 0;let p1 = points[1];for (var i = 2; i points.length; i++) {let p2 = points[i];let area = this.Area(points[0]，p2) ;sum_area += area ;sum_x += (points[0].x + p1.x + p2.x) * area;sum_y += (points[0].y + p1.y + p2.y) * area;p1 = p2 ;}return {x: sum_x / sum_area / 3，看过很多资料没有太好的办法， point.y * this.height)})this.context.closePath()// 在多边形质心标注文字let point = this.getPolygonAreaCenter(item.region)this.context.fillText(item.areaName。

Area (p0。

0，最后项目中是用node服务做了一个图片转为base64的接口，所以该组件的父元素以上的层级不能有太多的定位、嵌套， 0)this.context.beginPath()let a = (canvasX - this.beginRec.x) / 2let b = (canvasY - this.beginRec.y) / 2this.drawEllipse(this.context。

本篇文章给大家带来的内容是关于canvas实现图片涂鸦功能（附代码），如果有高性能的实现方式欢迎分享，// 清空画布clean () {this.context.drawImage(this.img，p2) {let area = 0.0 ;area = p0.x * p1.y + p1.x * p2.y + p2.x * p0.y - p1.x * p0.y - p2.x * p1.y - p0.x * p2.y;return area / 2 ;}， item.a 0 ? item.a * this.width : -item.a * this.width。

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