使用canvas实现图纸标记及回显

图纸

图纸标记后的效果图

最近做的一个qms项目里面，需要前端在图纸上实现标记及标记后的内容还要能够回显，然后后端通过标记的点，去读取标记图纸的内容，如一些公式、数据之类的，目前实现的功能有 在图纸上面进行矩形标记、已保存的标记回显、单个标记点清除、一键清除所有标记、保存标记图片
一开始听领导说，小段啊，咱们做的这个项目模块，有个功能图纸标记的功能，需要前端做下，大概就是在图纸上面框住或者圈住一部分，然后传给后端，后端根据你传过去的数据，去读取标记的内容，实现一些其他的业务逻辑。。我一开始是懵逼的，这是啥呀，又搞骚操作？？唉，打工人一切向钱看齐，想办法吧，正好前端同时之前做过类似的demo，可以借鉴，同时加上自己的一些琢磨，功能是基本实现，目前还没和后端对接。
说一下思路：我研究了下，目前在图片上面做一些操作的，大多是通过canvas实现的，canvas的默认背景是黑色的，然后下载后的图片背景就是乌黑黑的一片加一些自己画的线，然后就想着把图纸作为canvas的背景图片，这样下载后的背景图片就是图纸，挺好的，哈哈，剩下的具体代码实现的逻辑，都在贴在下面的代码示例里面了！！

以下是操作视频

图纸标记组件视频

代码如下

<template><div><div><a-button @click="clearBtn" style="margin-right:15px;">清除当前标记</a-button><a-button @click="clearAllBtn" style="margin-right:15px;">清除所有标记</a-button><a-button @click="saveBtn" type="primary" style="margin-right:15px;">保存标记</a-button><a-button @click="saveImage" type="primary">下载标记图片</a-button></div><div style="margin:10px 0"><a-form :model="formInfo" ref="formRef" name="basic" :label-col="{ span: 6 }":wrapper-col="{ span: 18 }"><a-row :gutter="20"><a-col :span="8"><a-form-item label="标记名称" name="rectName"><a-input v-model:value="rectName" placeholder="请输入标记名称" allowClear></a-input></a-form-item></a-col></a-row></a-form></div><div id="canvasDiv"><canvas ref="canvas"  @contextmenu.prevent="canvasRight" @mousedown="startMark" @click="canvasClick" @mousemove="draw" @mouseup="endMark"></canvas></div></div>
</template><script>
import cardPng from '/@/assets/images/card.png';export default {data() {return {isMarking: false,//是否开始在标记的标识startX:0,//点击时初始位置x轴startY:0,//点击时初始位置y轴markedRectangles: [{x:162, y:253, width:46, height:76,name:'过渡板'},{x:70, y:253, width:47, height:70,name:'电磁阀'},{x:447, y:928, width:114, height:39,name:'软管'},], // 存储已标记矩形的数组rectObj:'',//记录最后一次的矩形rectName:'',//标记名称};},mounted() {//设置canvas背景this.loadCanvas();window.addEventListener('resize', this.loadCanvas);},beforeDestroy() {window.removeEventListener('resize', this.loadCanvas);},methods: {canvasRight(e){e.preventDefault();// 阻止默认的右键菜单},//下载标记并且保存的canvas图片saveImage(){this.drawBackground();//重绘canvas及回显保存的标记，若是标记未保存，则不会在下载的图片里面显示const img = this.canvas.toDataURL('image/png');const link = document.createElement('a');link.href = img;link.download = 'canvas.png';console.log(img,'img')console.log(link,'link')link.click();},canvasClick(event){// cavans点击事件监听console.log(event,'event')const canvas = this.$refs.canvas;const ctx = canvas.getContext('2d');const rect = canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;// 遍历已标记的矩形，检查点击位置，若是在标记数组的矩形范围内，则从数组中进行比对，进行标记名称回显for (let i = this.markedRectangles.length - 1; i >= 0; i--) {const markedRect = this.markedRectangles[i];if (x >= markedRect.x &&x <= markedRect.x + markedRect.width && y >= markedRect.y && y <= markedRect.y + markedRect.height){this.rectObj=markedRect;this.rectName=markedRect.name;}}},//绘制canvas、添加背景图片、把标记数组里面的点回显drawBackground(){this.canvas.width = this.image.width;this.canvas.height = this.image.height;this.ctx.drawImage(this.image, 0, 0);this.ctx.strokeStyle = '#99eb1e';//改变画线的颜色和宽度this.ctx.lineWidth = 2;this.markedRectangles.forEach((item,index)=>{item.resetid=new Date().getTime()+index;})console.log(this.markedRectangles,'markedRectangles')for(let i=0;i<this.markedRectangles.length;i++){this.ctx.strokeRect(this.markedRectangles[i].x, this.markedRectangles[i].y, this.markedRectangles[i].width, this.markedRectangles[i].height)//起点/终点/宽度/高度}},//赋值初始值x轴的点、y轴的点startMark(event) {this.isMarking = true;//开始标记，记录此时开始标记的初始点const rect = this.canvas.getBoundingClientRect();this.startX = event.offsetX;this.startY = event.offsetY;},//标记中draw(event) {if (this.isMarking) {//获取最后标记的位置，拿最后标记的位置的x轴值、y轴值与初始位置的x轴值，与y轴值进行计算，获取标记矩形的宽高const rect = this.canvas.getBoundingClientRect();const x = event.offsetX - this.startX;const y = event.offsetY - this.startY;//canvas绘制时，会把背景图清掉，需要再次调用下添加背景图的方法this.drawBackground();this.ctx.strokeRect(this.startX, this.startY, x, y);this.rectObj={x:this.startX, y:this.startY,width: x,height:y};//把最后的标记矩形的位置及宽高记录，若是保存此时的标记，会用到}},//标记结束endMark() {this.isMarking = false;//重置标记标识为false},// 初始化canvasloadCanvas(){this.canvas = this.$refs.canvas;this.ctx = this.canvas.getContext('2d');this.image = new Image();this.image.src = cardPng; // 替换为你的图片路径let canvasDiv=document.getElementById("canvasDiv");this.image.onload = () => {this.drawBackground();};},saveBtn(){// 保存时，若是此时的矩形存在，则添加到标记数组里面console.log(this.rectObj,'rectObj')if(this.rectObj!=''){let that=this;//防止同一个标记被保存多次for(let i=0;i<this.markedRectangles.length;i++){if(this.markedRectangles[i].x!=that.rectObj.x&&this.markedRectangles[i].y!=that.rectObj.y&&this.markedRectangles[i].width!=that.rectObj.width&&this.markedRectangles[i].height!=that.rectObj.height){if(this.rectName){that.rectObj.name=this.rectName;that.markedRectangles.push(that.rectObj)that.$message.success('该标记已保存')that.rectObj='';return false}else{this.$message.warning('请输入标记名称')}}}}else{this.$message.warning('暂无标记可以保存')return false}console.log(this.markedRectangles,'markedRectangles')},//清除标记clearBtn(){//重绘canvas// 若是有resetid，则是已保存过的，若是没有resetid，则是后来新增的if(this.rectObj!=''){if(this.rectObj.resetid){// this.rectObj='';this.$confirm('确定删除?', '提示', {okText: '确定',cancelText: '取消',type: 'warning'}).then(() => {for(let i=0;i<this.markedRectangles.length;i++){if(this.markedRectangles[i].x==this.rectObj.x&&this.markedRectangles[i].y==this.rectObj.y&&this.markedRectangles[i].width==this.rectObj.width&&this.markedRectangles[i].height==this.rectObj.height){this.rectName='';this.rectObj='';this.markedRectangles.splice(i, 1); // 从数组中移除this.$message.success('标记已清除')this.drawBackground();return false}}}).catch(() => {this.$message({type: 'warning',message: '已取消删除'});          });}else{this.drawBackground();this.rectObj='';this.$message.warning('标记已清除')return false}}else{this.$message.warning('暂无标记可以清除')}},//一键清除所有标记clearAllBtn(){//把标记数组清空，同时重绘canvasif(this.markedRectangles.length>0){this.markedRectangles=[];this.drawBackground();}else{this.$message.warning('暂无标记可以清除')return false}},}
};
</script>
<style scoped>
#canvasDiv{width:800px;height: auto;
}
</style>