js实现图片拖拽，定点缩放，旋转 （二）

这篇我们继续来完成图片的定点缩放功能，同样兼容性目前只考虑谷歌，其他类型和版本的自行拓展

1、定点缩放

html部分

<div id="app">
  <img id="img"
       src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F1812.img.pp.sohu.com.cn%2Fimages%2Fblog%2F2009%2F11%2F18%2F18%2F8%2F125b6560a6ag214.jpg&refer=http%3A%2F%2F1812.img.pp.sohu.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625993298&t=9de0d6fb925f43ebe1f700162ee8d8c5"
       alt="">

</div>

css部分

js部分

<script>
    //定点缩放
  const el = document.getElementById('img');
  el.onmousewheel = function (e) {
    /*使用zoom属性-----相对起点缩放*/
    const OE = e || event;
    //获取图片的宽高
    const offsetWidth = el.offsetWidth;
    const offsetHeight = el.offsetHeight;
    //获取图片距离body左侧和上面的距离
    const left = parseFloat(el.offsetLeft);
    const top = parseFloat(el.offsetTop);
    //获取定点的位置（鼠标在图片上的位置）
    const disX = OE.clientX - el.offsetLeft;
    const disY = OE.clientY - el.offsetTop;
    //wheelDelta的值为正（120.240...）则是鼠标向上；为负（-120，-240）则是向下
    if (e.wheelDelta > 0) {
      el.style.width = offsetWidth + offsetWidth * 0.2 + 'px'; //图片缩放，这个0.2是自定义的缩放比例可根据实际情况调整
      el.style.height = offsetHeight + offsetHeight * 0.2 + 'px';
      el.style.left = left - disX * 0.2 + 'px'; //由于图片是定点缩放的，所以图片的位置应该更改
      el.style.top = top - disY * 0.2 + 'px';
    } else {
      el.style.width = offsetWidth - offsetWidth * 0.2 + 'px';
      el.style.height = offsetHeight - offsetHeight * 0.2 + 'px';
      el.style.left = left + disX * 0.2 + 'px';
      el.style.top = top + disY * 0.2 + 'px';
    }
  };
</script>

好了这样一个简单的图片定点缩放的功能就实现了

2、旋转

旋转的功能就很简单了就一行代码，所以就不详细写了(rotateDeg为旋转的角度)

el.style.transform = 'rotate(${rotateDeg}deg)'