vue canvas绘制多边形

vue canvas绘制多边形

<div><el-row><el-col :span=><div class=toolbar><div ><el-button type=primary size=mini icon=el-icon-plus @click=add>添加</el-button><el-button type=primary size=mini icon=el-icon-view @click=addExhibition>展示</el-button></div></div></el-col><el-col :span=20><div class=canvas-box style=width: 1276px; height: 718px;><canvas id=mapcvs width=1276 height=718></canvas><canvas id=cvs width=1276 height=718></canvas></div></el-col></el-row></div>

1、增加

add() {flag = false //防止重复clicksum //当前第一几条数据points[clicksum] = {point:[],color:()} //随机颜cvs.addEventListener(	mousedown	, , false)cvs.addEventListener(	dblclick	, , false)
},

2、鼠标按下绘制

mousedownHandler(event) {if (event.button == 0 && !flag) {points[clicksum].point.push({x: event.pageX - cvsClientRect.x,y: event.pageY - cvsClientRect.y})if (points.length >= 1) {cvs.addEventListener(	mousemove	, , false)}this.drawPolygon(points[clicksum].point,points[clicksum].color)}
},

、鼠标双击确定绘制范围

mousedbclick(event) {flag = truecvs.removeEventListener(	mousemove	, )
},

4、清空绘制

clear() {points = [](0, 0, cvs.width, cvs.height)
},

<template><div><el-row><el-col :span=><div class=toolbar><div ><el-button type=primary size=mini icon=el-icon-plus @click=add>添加</el-button><el-button type=primary size=mini icon=el-icon-view @click=addExhibition>展示</el-button></div><div class=record v-for=(item,index) in pointsData :key=index><div  :style={ backgroundColor: }></div><el-button type=success icon=el-icon-edit circle ></el-button><el-button type=danger icon=el-icon-delete circle @click=itemClear(index)></el-button></div></div></el-col><el-col :span=20><div class=canvas-box style=width: 1276px; height: 718px;><canvas id=mapcvs width=1276 height=718></canvas><canvas id=cvs width=1276 height=718>不支持canvas</canvas></div></el-col></el-row></div>
</template><script>
var cvs
var cvsClientRect
var ctx
let points//绘制数据
let clicksum = -1
var flag
var mapcntx
var mapcanvas
export default {props:[	imgSrc	],data() {return {pointsData:[],绘制数据colorList: [	#EB675E	,#EB675E,#BEA1,#FDCF78,#6991ED,#9599E1,#DAAE1,#FF88B,#E77B79,#0FABEB,#ADFFC1,	#92D2E1	,	#9FB0E1	],colorActionList:[]}},mounted() {cvs = document.getElementById(	cvs	)cvsClientRect = cvs.getClientRects()[0]ctx = cvs.getContext(	2d	)points = []flag = falsemapcanvas = document.getElementById(	mapcvs	)mapcntx = mapcanvas.getContext(	2d	)var img = new Image()img.src = this. = function() {var pattern = (img, 	no-repeat	)mapcntx.drawImage(img, 0, 0)mapcntx.fillStyle = patternmapcntx.fillRect(0, 0, 00, 00)}},methods: {//增加add() {flag = falseclicksumcole.log(clicksum)points[clicksum] = {point:[],color:()}cvs.addEventListener(	mousedown	, , false)cvs.addEventListener(	dblclick	, , false)},//全部删除clear() {points = [](0, 0, cvs.width, cvs.height)},mousedownHandler(event) {if (event.button == 0 && !flag) {points[clicksum].point.push({x: event.pageX - cvsClientRect.x,y: event.pageY - cvsClientRect.y})if (points.length >= 1) {cvs.addEventListener(	mousemove	, , false)}this.drawPolygon(points[clicksum].point,points[clicksum].color)}},//鼠标双击mousedbclick(event) {flag = truecvs.removeEventListener(	mousemove	, )},//canvas绘制drawPolygon(point,color) {(0, 0, cvs.width, cvs.height)ctx.strokeStyle = colorctx.beginPath()ctx.lineWidth=(point[0].x, point[0].y)for (var i = 1; i < point.length; i) {ctx.lineTo(point[i].x, point[i].y)}()ctx.stroke()this.$nextTick(()=>{  this.pointsData = points.filter(d => d)this.$emit(	drawAreaDataEv	,points)this.$forceUpdate()})},//鼠标左键抬起当前位置mousemoveHandler(event) {this.drawPolygon(points[clicksum].({x: event.pageX - cvsClientRect.x,y: event.pageY - cvsClientRect.y}),points[clicksum].color)},//全部展示addExhibition() {(0, 0, cvs.width, cvs.height)points.forEach(ite=>{ctx.strokeStyle = beginPath()ctx.lineWidth=(ite.point[0].x, ite.point[0].y)ite.point.forEach(it=>{ctx.lineTo(it.x, it.y)})()ctx.stroke()})},//删除其中一条数据itemClear(index) {points = points.filter(d => d)unshift(this.pointsData[index].color)splice(clicksum,1)points.splice(index,1)this.pointsData.splice(index,1)clicksum--this.$emit(	drawAreaDataEv	,points)this.addExhibition()},//判断距离distanceCheck(lng_a, lat_a, lng_b, lat_b) {var pk = 180 / .14169;var a1 = lat_a / pk;var a2 = lng_a / pk;var b1 = lat_b / pk;var b2 = lng_b / pk;var t1 = (a1) * (a2) * (b1) * (b2);var t2 = (a1) * Math.sin(a2) * (b1) * Math.sin(b2);var t = Math.sin(a1) * Math.sin(b1);var tt = Math.acos(t1  t2  t);return Math.floor(666000 * tt);},//十六进制颜随机color16(){let color = 		if(clicksum>=length-1) {color = [length-1]}else {color = [clicksum]push(color)splice(clicksum,1)}return color}}
}
</script><style lang=scss>
canvas {// border: 1px solid #000;position: absolute;
}
.record {display: flex;align-items: center;margin-top: 10px;>div {width: 80px;height: px;margin: 0 10px;cursor: pointer;}
}
.toolbar {margin-right: 20px;
}
</style>