使用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
    },
    // 初始化canvas
    loadCanvas(){
      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(){
      //把标记数组清空，同时重绘canvas
      if(this.markedRectangles.length>0){
        this.markedRectangles=[];
        this.drawBackground();
      }else{
        this.$message.warning('暂无标记可以清除')
        return false
      }
    },
  }
};
</script>
<style scoped>
#canvasDiv{
  width:800px;
  height: auto;
}
</style>