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=