点击表格中文字，图片中相关文字进行红框标注

需求：后端返回图片中所出现的文字（文字在图片中的坐标，文字在图片中的高度和宽度）以及该图片，用户点击该文字，图片中相应的文字进行红框标注

图片布局的主要结构：

<div>  <!--图片的父结构-->

   <img> <!--图片结构-->

   <div></div> <!---红框布局-->

</div> 

以下为主要布局代码及样式

<template>
 <div class="imgCont" ref="imgCont">
          <el-image
            id="imgUrl"
            ref="imgUrl"
            :src="imgUrl"
            :preview-src-list="srcList"
          ></el-image>

          <div class="positionDiv" ref="positionDiv"></div>
        </div>
</template>

<style scoped>
.imgCont {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
}
.positionDiv {
  position: absolute;
  /* border: 2px solid #f00; */
  border: 1px solid transparent;
}
</style>

逻辑：

1.获得图片在界面上渲染的时候的高度及宽度

2.获得图片上一级盒子父盒子的宽度和高度

3.获得图片实际的宽度和高度

4.获得padding高度和宽度

5.根据图片的实际宽高和渲染的宽高获得图片缩放的宽高占比

6.根据后端返回的坐标以及我们获得占比进行红框的样式追加

 

cellClickEvent({ row, column }) {
      let boxDom = this.$refs.positionDiv; // 红框dom
      let imgUrlDom = document.getElementById("imgUrl"); // 获得图片标签dom
      // 图片渲染宽高
      let h = imgUrlDom.offsetHeight,
        w = imgUrlDom.offsetWidth;
      // 获得父元素的宽度、高度
      let pH = this.$refs.imgCont.offsetHeight,
        pW = this.$refs.imgCont.offsetWidth;
      // 获得padding的高度和宽度
      let padH = (pH - h) / 2,
        padW = (pW - w) / 2;
      // 原始宽高
      let imgH = this.$refs.imgUrl.imageHeight,
        imgW = this.$refs.imgUrl.imageWidth;
      // 原图片大小基于缩放大小占比
      let sizeH = imgH / h,
        sizeW = imgW / w;
      // 获得后端返回的坐标值
      if (!row.width) {
        return false;
      }
      let reallyW = row.width,
        reallyH = row.height,
        reallyLeft = row.x,
        reallyTop = row.y;
      console.log("reallyLeft", reallyLeft);
      console.log("reallyTop", reallyTop);
      // 设置红色选择框大小 5为额外增加框选的宽高度
      boxDom.style.border = "1px solid #f00";
      boxDom.style.width = reallyW / sizeW + "px";
      boxDom.style.height = reallyH / sizeH + "px";
      boxDom.style.left = reallyLeft / sizeW + padW + "px";
      boxDom.style.top = reallyTop / sizeH + padH + "px";
      boxDom.style.transform = `rotate(${row.angle}deg)`;
    },
  },