vue coords动态赋值 图片热区随图片大小自由缩放

网上很多人写了例子，一直看不懂那个比例

<img id="pic" src="pic.jpg" alt="" usemap="#Map" width="1920" height="1080" />

<area shape="rect" coords="338,308,609,589" href="/" class="box" target="_blank" onfocus= "this.blur() " >
var x1 = parseInt(picw*0.1820);
var y1 = parseInt(pich*0.2955);
var x2 = parseInt(picw*0.3280);
var y2 = parseInt(pich*0.5645);

经过验证发现这个例子是错误的，比例不对。
你可以看到有四个数字，这四个数字代表的是什么意思呢，前两个数字是矩形热区左上角的点相对于图片总长宽的横坐标和纵坐标，后面两个数字是矩形热区右下角的点相对于图片总长宽的横坐标和纵坐标。并用了vue给属性动态赋值，只是demo还没整理，实测有效。

我自己写了一个例子

<div class="area-wrap" ref="wrap">
      <img
        src="../../../../public/img/demo_bg1.jpg"
        usemap="#Map"
        ref="demoBg"
        id="demoBg"
        class="demo_bg"
        border="0"
      />
      <map name="Map" id="Map">
        <area
          shape="rect"
          :coords="[cor1x1, cor1y1, cor1x2, cor1y2]"
          @click="vidClick()"
          href="#"
          class="box"
          name=""
        />
        <area
          shape="rect"
          :coords="[cor2x1, cor2y1, cor2x2, cor2y2]"
          @click="vidClick()"
          href="#"
          class="box"
          name=""
        />
 </div>

<script>
export default {
  name: "demoHome",
  data() {
    return {
      picWidth: "",
      picHeight: "",
      cor1x1: 0,
      cor1y1: 0,
      cor1x2: 0,
      cor1y2: 0,
      cor2x1: 0,
      cor2y1: 0,
      cor2x2: 0,
      cor2y2: 0,
     }
  },
  mounted() {
    window._this = this;
    var picWidth = this.$refs.demoBg.offsetWidth;
    //图片的高度写死了比例，
    var picHeight = 0.66285*picWidth;
    // 1
    var coordsStr1 = "229,146,279,188";
    var coordsArr1 = coordsStr1.split(",");
    var cor1xRatio1 = parseInt(coordsArr1[0]) / 700;
    var cor1yRatio1 = parseInt(coordsArr1[1]) / 464;
    var cor1xRatio2 = parseInt(coordsArr1[2]) / 700;
    var cor1yRatio2 = parseInt(coordsArr1[3]) / 464;
    this.cor1x1 = parseInt(picWidth * cor1xRatio1);
    this.cor1y1 = parseInt(picHeight * cor1yRatio1);
    this.cor1x2 = parseInt(picWidth * cor1xRatio2);
    this.cor1y2 = parseInt(picHeight * cor1yRatio2);
    // 2
    var coordsStr2 = "333,141,370,178";
    var coordsArr2 = coordsStr2.split(",");
    var cor2xRatio1 = parseInt(coordsArr2[0]) / 700;
    var cor2yRatio1 = parseInt(coordsArr2[1]) / 464;
    var cor2xRatio2 = parseInt(coordsArr2[2]) / 700;
    var cor2yRatio2 = parseInt(coordsArr2[3]) / 464;
    this.cor2x1 = parseInt(picWidth * cor2xRatio1);
    this.cor2y1 = parseInt(picHeight * cor2yRatio1);
    this.cor2x2 = parseInt(picWidth * cor2xRatio2);
    this.cor2y2 = parseInt(picHeight * cor2yRatio2);
 

    window.onresize = () => {
          var picWidth = this.$refs.demoBg.offsetWidth;
	    var picHeight = 0.66285*picWidth;
	    // 1
	    var coordsStr1 = "229,146,279,188";
	    var coordsArr1 = coordsStr1.split(",");
	    var cor1xRatio1 = parseInt(coordsArr1[0]) / 700;
	    var cor1yRatio1 = parseInt(coordsArr1[1]) / 464;
	    var cor1xRatio2 = parseInt(coordsArr1[2]) / 700;
	    var cor1yRatio2 = parseInt(coordsArr1[3]) / 464;
	    this.cor1x1 = parseInt(picWidth * cor1xRatio1);
	    this.cor1y1 = parseInt(picHeight * cor1yRatio1);
	    this.cor1x2 = parseInt(picWidth * cor1xRatio2);
	    this.cor1y2 = parseInt(picHeight * cor1yRatio2);
	    // 2
	    var coordsStr2 = "333,141,370,178";
	    var coordsArr2 = coordsStr2.split(",");
	    var cor2xRatio1 = parseInt(coordsArr2[0]) / 700;
	    var cor2yRatio1 = parseInt(coordsArr2[1]) / 464;
	    var cor2xRatio2 = parseInt(coordsArr2[2]) / 700;
	    var cor2yRatio2 = parseInt(coordsArr2[3]) / 464;
	    this.cor2x1 = parseInt(picWidth * cor2xRatio1);
	    this.cor2y1 = parseInt(picHeight * cor2yRatio1);
	    this.cor2x2 = parseInt(picWidth * cor2xRatio2);
	    this.cor2y2 = parseInt(picHeight * cor2yRatio2);
    };
  },
 }
</script>