vue canvas绘制多边形

一、html部分

<div><el-row><el-col :span="3"><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>

二、js部分

1、增加

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

2、鼠标按下绘制

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

3、鼠标双击确定绘制范围

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

4、清空绘制

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

三、全部代码

<template><div><el-row><el-col :span="3"><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: item.color}"></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 clicksNum = -1
var flag
var mapcntx
var mapcanvas
export default {props:['imgSrc'],data() {return {pointsData:[],绘制数据colorList: ['#EB675E',"#EB675E","#B33EA1","#FDCF78","#6991ED","#9599E1","#D3AAE1","#FF88B3","#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.imgSrcimg.onload = function() {var pattern = mapcntx.createPattern(img, 'no-repeat')mapcntx.drawImage(img, 0, 0)mapcntx.fillStyle = patternmapcntx.fillRect(0, 0, 300, 300)}},methods: {//增加add() {flag = falseclicksNum++console.log(clicksNum)points[clicksNum] = {point:[],color:this.color16()}cvs.addEventListener('mousedown', this.mousedownHandler, false)cvs.addEventListener('dblclick', this.mousedbclick, false)},//全部删除clear() {points = []ctx.clearRect(0, 0, cvs.width, cvs.height)},mousedownHandler(event) {if (event.button == 0 && !flag) {points[clicksNum].point.push({x: event.pageX - cvsClientRect.x,y: event.pageY - cvsClientRect.y})if (points.length >= 1) {cvs.addEventListener('mousemove', this.mousemoveHandler, false)}this.drawPolygon(points[clicksNum].point,points[clicksNum].color)}},//鼠标双击mousedbclick(event) {flag = truecvs.removeEventListener('mousemove', this.mousemoveHandler)},//canvas绘制drawPolygon(point,color) {ctx.clearRect(0, 0, cvs.width, cvs.height)ctx.strokeStyle = colorctx.beginPath()ctx.lineWidth=3ctx.moveTo(point[0].x, point[0].y)for (var i = 1; i < point.length; i++) {ctx.lineTo(point[i].x, point[i].y)}ctx.closePath()ctx.stroke()this.$nextTick(()=>{  this.pointsData = points.filter(d => d)this.$emit('drawAreaDataEv',points)this.$forceUpdate()})},//鼠标左键抬起当前位置mousemoveHandler(event) {this.drawPolygon(points[clicksNum].point.concat({x: event.pageX - cvsClientRect.x,y: event.pageY - cvsClientRect.y}),points[clicksNum].color)},//全部展示addExhibition() {ctx.clearRect(0, 0, cvs.width, cvs.height)points.forEach(ite=>{ctx.strokeStyle = ite.colorctx.beginPath()ctx.lineWidth=3ctx.moveTo(ite.point[0].x, ite.point[0].y)ite.point.forEach(it=>{ctx.lineTo(it.x, it.y)})ctx.closePath()ctx.stroke()})},//删除其中一条数据itemClear(index) {points = points.filter(d => d)this.colorList.unshift(this.pointsData[index].color)this.colorActionList.splice(clicksNum,1)points.splice(index,1)this.pointsData.splice(index,1)clicksNum--this.$emit('drawAreaDataEv',points)this.addExhibition()},//判断距离distanceCheck(lng_a, lat_a, lng_b, lat_b) {var pk = 180 / 3.14169;var a1 = lat_a / pk;var a2 = lng_a / pk;var b1 = lat_b / pk;var b2 = lng_b / pk;var t1 = Math.cos(a1) * Math.cos(a2) * Math.cos(b1) * Math.cos(b2);var t2 = Math.cos(a1) * Math.sin(a2) * Math.cos(b1) * Math.sin(b2);var t3 = Math.sin(a1) * Math.sin(b1);var tt = Math.acos(t1 + t2 + t3);return Math.floor(6366000 * tt);},//十六进制颜色随机color16(){let color = ''if(clicksNum>=this.colorList.length-1) {color = this.colorList[this.colorList.length-1]}else {color = this.colorList[clicksNum]this.colorActionList.push(color)this.colorList.splice(clicksNum,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: 3px;margin: 0 10px;cursor: pointer;}
}
.toolbar {margin-right: 20px;
}
</style>

vue canvas绘制多边形相关推荐

canvas绘制多边形
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue + canvas绘制扇形圆盘
vue + canvas绘制扇形圆盘 html: <canvas style="position: fixed;z-index:-1" width="545&quo ...
vue+canvas绘制时间轴
vue+canvas绘制时间轴最近在研究canvas绘制时间轴,直接上代码,希望分享能给大家带来帮助,效果如下: 代码如下,可以拷贝到vue项目中直接预览 <template><d ...
vue canvas画多边形
第一个版本,只是单纯用来画多边形的,而且只能画一个. <template><div class="main"><div>这纷纷飞花,这纷纷飞花已 ...
vue + canvas绘制背景图、矩形
最近有需求做图片人脸识别,在系统上传图片后,后台返回坐标将识别到的人脸画上矩形. 效果图如下: 实现过程: 1.利用绘制canvas实例 //html <canvas id='imgCanvas ...
vue+canvas绘制时间轴组件
说明: 此组件使用vue2语法以及canvas实现. 效果图: 线上地址: time-select-line 安装: npm i time-select-line --save 导入: import ...
（三）canvas绘制样式
beginPath() 对画线点的一个开始限制 moveTo() 画线的起点,只在开头使用参数两个x轴,y轴 lineTo() 后续连线两个参数x轴,y轴 stroke() 连线无填充 fill( ...
Vue+Openlayer使用Draw实现交互式绘制多边形并获取面积
场景 Vue+Openlayer使用Draw实现交互式绘制线段: Vue+Openlayer使用Draw实现交互式绘制线段_BADAO_LIUMANG_QIZHI的博客-CSDN博客在上面的基础上实 ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...

vue canvas绘制多边形

一、html部分

二、js部分

1、增加

2、鼠标按下绘制

3、鼠标双击确定绘制范围

4、清空绘制

三、全部代码

vue canvas绘制多边形相关推荐

最新文章

热门文章